在Webkit中使用带有定位对象的剪切路径

Question

考虑this simple SVG file：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
     viewBox="0 0 353 150">
  <defs>
    <clipPath id="walk0"><rect width="44" height="70" /></clipPath>
    <image id="img" x:href="http://phrogz.net/tmp/walking-girl2.png"
           width="353" height="70" />
  </defs>
  <use x:href="#img"        clip-path="url(#walk0)" />
  <use x:href="#img" y="80" clip-path="url(#walk0)" />
</svg>

目的是将两个spritesheet副本剪裁到同一区域，第二个副本减少80个单位。这适用于Firefox（剪切路径在y偏移之前应用）。但是，在Chrome和Safari中，第二张图片未显示。 （剪切路径使用全局SVG单位空间应用，因此显示图像的空白区域。）

1）这些浏览器中哪一个是正确的？或
2）实现这一目标的最简单，基于标准的方法是什么？

我可以通过using wrapping <g> elements with transforms解决问题;这适用于Firefox和Chrome。但我希望有一种更简单的方法可以以正确的跨浏览器方式实现相同的结果。

FWIW，我也尝试在clipPathUnits="objectBoundingBox"上设置clipPath，但这总是会产生一个未剪辑的图像。即使我将<image>包含在<symbol>明确的viewBox，height和width中并使用<use>引用了<image>，也是如此而不是objectBoundingBox。要么我不明白{{1}}应该如何工作，要么对它的支持目前已被打破。答案肯定是前者而不是后者。 ;）

Answer 1

最简单，符合标准的区分方法是使用the SVG test suite provided by W3.org。该套件提供了use结构的测试，您可以使用它来确定合规性等等。

问题是你的y值是如何被解析的，这导致你的数字转换出第二帧，但仅限于某些浏览器。这是指定所需翻译的正确的跨浏览器方式：

<use x:href="#img" clip-path="url(#walk0)"的 transform="translate(0,80)" />

我认为关于当前剪辑窗格的可疑解析是回归。