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

考虑这个简单的 SVG 文件:

<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) 这些浏览器中哪一种是正确的？, or
2) 实现这一目标的最简单、基于标准的方法是什么？

我可以通过以下方式解决这个问题使用包装<g>带有变换的元素;这适用于 Firefox 和 Chrome。但我希望有一种更简单的方法以正确的跨浏览器方式实现相同的结果。

FWIW，我也尝试过设置clipPathUnits="objectBoundingBox" on the clipPath，但这总是产生未剪辑的图像。即使当我包裹时也是如此<image> in a <symbol>具有明确的viewBox, height and width并引用了<use>而不是<image>。要么我不明白如何objectBoundingBox应该可以工作，或者目前对其的支持已被破坏。答案当然有可能是前者而不是后者。 ;)

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

问题是你的y正在解析值，这导致您的图形从第二帧转换出来，但仅限于某些浏览器。这是指定所需翻译的正确的跨浏览器方式：

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

我认为对当前剪切窗格的可疑解析是回归。