将剪切路径与Webkit中的定位对象一起使用 [英] Using a clipping path with a positioned object in 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单位空间应用的，因此显示了图像的空白区域.)

The intent is to have two copies of the spritesheet clipped to the same region, with the second copy 80 units lower down. This works as intended in Firefox (the clipping path is applied before the y offset). In Chrome and Safari, however, the second image is not shown. (The clipping path is applied using global SVG unit space, and hence shows an empty area of the image.)

                           

                           

1)以下哪个浏览器是正确的?，或者
2)实现此目标的最简单的，基于标准的方法是什么?

1) Which one of these browsers is correct?, or
2) What is the simplest, standards-based way to achieve this goal?

我可以通过通过转换包装<g>元素来解决此问题 ;这在Firefox和Chrome中均适用.但我希望有一种更简单的方法，以正确且跨浏览器的方式获得相同的结果.

I can work around the problem by using wrapping <g> elements with transforms; this works in both Firefox and Chrome. But I'm hoping that there's a simpler way to achieve the same results in a correct and cross-browser manner.

FWIW，我也尝试在clipPath上设置clipPathUnits="objectBoundingBox"，但这始终会产生未剪切的图像.即使当我将<image>用显式的viewBox，height和width包裹在<symbol>中并用<use>而不是<image>引用时，也是如此.我可能不明白objectBoundingBox应该如何工作，或者目前对它的支持已损坏.答案肯定是前者而不是后者. ;)

FWIW, I also tried setting clipPathUnits="objectBoundingBox" on the clipPath, but this always produced an unclipped image. This was true even when I wrapped the <image> in a <symbol> with an explicit viewBox, height and width and referenced that with the <use> instead of the <image>. Either I don't understand how objectBoundingBox is supposed to work, or support for it is currently broken. It is certainly possible that the answer is the former instead of the latter. ;)

推荐答案

最简单，符合标准的区分方法是使用

The easiest, standards-compliant way to differentiate between these is to use the SVG test suite provided by W3.org. This suite provides tests for use structs that you can play with to determine compliance, among many others.

问题在于您如何解析y值，这导致图形转换到第二帧之外，但仅限于某些浏览器.这是正确的跨浏览器方法，用于指定所需的翻译:

The problem is how your y value is being parsed, which is causing your figure to translate out of the second frame, but only in some browsers. This is the correct, cross-browser way to specify the desired translation:

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

我认为相对于当前剪辑窗格的可疑解析是一种回归.

I would assume the dubious parsing with respect to the current clipping pane is a regression.

这篇关于将剪切路径与Webkit中的定位对象一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！