Question

对于我的生活，我无法弄清楚为什么SVG不会呈现以下图形：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1636px" height="911px" viewBox="0 0 623316 347091">
<clipPath id="randompath">
            <path d="M 6096 82296 C 6096 40211.90206289354 48740.87757861691 6096 101345.99999999999 6095.999999999988 153951.12242138304 6095.999999999977 196596.00000000003 40211.9020628935 196596.00000000003 82295.99999999996 196596.00000000003 124380.09793710642 153951.1224213831 158495.99999999997 101346.00000000001 158495.99999999997 48740.87757861695 158495.99999999997 6096.000000000012 124380.09793710642 6096 82295.99999999997 Z"/>
</clipPath>
<image x="0" y="0" height="500px" width="500px" xlink:href="http://www.cutepandapictures.com/wp-content/uploads/2012/07/babypandahugsatree.jpg" transform="matrix(381,0,0,381,6096,6096)" clip-path="url(#randompath)"/>
</svg>

我发现了以下两件事：

当剪辑路径为基本圆时，图像会被正确剪裁。
未设置剪辑路径时，图像会正确渲染。

可以使用功能失常的代码演示here。

编辑：clipPath内部的路径可以自行呈现。我怀疑它不会渲染，因为根据this，剪辑路径是相对于被剪裁的图像渲染的，而不是视图框。

Answer 1

SVG！= CSS。在SVG中设置视图箱单元后，这些单位通常会覆盖文档其余部分中指定的任何单位（如<image>中的“px”）。 SVG正在读取“500px”的值和500个ViewBox单位（在你的情况下是像素的1/600（1636/623316）），然后应用指定的变换，将其缩放381x并将其移动6096个观察框单位（在x和y中也称为10pixels。

但你真正的问题是clipPath单元继承了那个变换（例如那些剪辑单元被解释为（623,316 x 381）宽度容器中的单位!!）

如果您使用视图框单位重做图像尺寸，并摆脱变换一切正常。以下只是粗略的近似，你需要得到你的计算器以获得真实的结果 - 但它确定了重点。

<image x="0" y="0" height="323000" width="150000" 
  xlink:href="http://www.cutepandapictures.com/wp-
  content/uploads/2012/07/babypandahugsatree.jpg"  clip-path="url(#randompath)"/>

或者，将所有剪辑路径值除以500'，您将看到一个开始有意义的结果。以下是剪辑路径编号除以1,000的示例（只需移动小数点即可）：http://jsfiddle.net/reU7t/

使用transform将clipPath应用于Image元素时出现问题

1 个答案: