在 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，我也尝试在clipPath 上设置clipPathUnits="objectBoundingBox"，但这总是会产生未剪辑的图像。即使我用显式的viewBox、height 和width 将<image> 包裹在<symbol> 中，并用<use> 而不是<image> 引用它，情况也是如此。要么我不明白objectBoundingBox 应该如何工作，要么目前对它的支持已被破坏。答案肯定是前者而不是后者。 ;)

Answer 1

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

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

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

我会假设关于当前剪辑窗格的可疑解析是一种回归。