Question

我最近发现SVG中的clipPaths比命令中指定的区域更大。

以下是我的代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<rect id="r1" x="100.85" y="100.39" width="200.51" height="100.72" fill="black"/>
<rect id="r2" x="100.85" y="100.39" width="200.51" height="100.72" fill="yellow"/>
<clipPath id="clip">
    <use xlink:href="#r2"/> 
</clipPath>
</defs>

<use xlink:href="#r1"/> 
<use xlink:href="#r2" clip-path="url(#clip)"/>  

</svg>

根据代码，矩形“r1”应该与剪切矩形“r2”完全重叠，只能看到r2。但事实并非如此。输出上看到黑色边框。

可能是什么原因？由于所有浏览器（Chrome，Firefox，Safari）似乎都显示出确切的行为，我想知道在理解规范时是否犯了错误。

我也尝试过应用shape-rendering =“crispEdges”属性，想知道Smoothing可能是罪魁祸首，但在这种情况下没有任何区别。

此外，我发现如果值都是整数（或精确映射到像素），则此边框消失。

非常感谢有关此问题的任何意见。

提前致谢。

Answer 1

剪辑工作正常。您所看到的是抗锯齿效果。

因为你的矩形与屏幕的像素没有完全对齐，所以矩形的一些边框像素的不透明度低于100％。

因此，当绘制黑色矩形时，它会有一些边框像素，它们是黑色和背景颜色（白色）的混合。

+-----+-----+- -
|grey |grey |
+-----+-----+  ..etc..
|black|black|
+-----+-----+- -

然后正好在它上面绘制黄色矩形。这次，矩形边框像素被绘制为黄色和前面下方绘制的黑白（即灰色）像素的混合。

+-----------+-----------+- -
|yellow/grey|yellow/grey|
+-----------+-----------+  ..etc..
|  yellow   |  yellow   |
+-----------+-----------+- -

如果您在精确的像素边界处绘制矩形，那么抗锯齿的流失就不可见了。

Demo here

SVG clipPaths剪辑对象超出预期。可能是什么原因？

1 个答案: