1

我对 SVG 中两个相同矩形的可视化有疑问。它们的大小和位置都相同，底部是黑色的，顶部是白色的：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC  "-//W3C//DTD SVG 1.1//EN" 
                      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_svg   "http://www.w3.org/2000/svg">
    <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="34.017"
      height="70.877" viewBox="0 0 34.017 70.877">
<g id="top_x5F_middle">
    <rect x="11" y="10" fill="black" width="11" height="31"/>
    <rect x="11" y="10" fill="white" width="11" height="31"/>
</g>
</svg>

在查看器（Firefox 浏览器或 Inkscape 编辑器）中查看它们时，会有一个小边框。不同缩放级别的边框不同，所以看起来浮动精度有问题。

在 Inkscape 中查看时的边框 在Firefox中查看时的边框

这个边界的原因是什么？如何删除它？

PS：我对黑客不感兴趣，因为让底部矩形更小等。这只是一个例子，真正的用例要复杂得多，不能通过调整大小来解决。

4

1 回答 1

3

这取决于抗锯齿。绘制第一个矩形时，它与背景混合，略微涂抹它。与第二个相同，因此您会得到灰色轮廓。

如果你想避免这种情况，一种方法是使用 shape-rendering="crispEdges"禁用抗锯齿

于 2012-04-25T11:06:37.967 回答