覆盖两个相同的SVG矩形时的微小边框

Question

我对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编辑器）中查看它们时，边框很小。边框在不同的缩放级别上是不同的，因此它看起来像浮点精度的问题。

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

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

Answer 1

这取决于抗锯齿。当绘制第一个矩形时，它与背景混合，稍微涂抹它。与第二个相同，所以你得到一个灰色轮廓。

如果你想避免这种情况，一种方法是使用shape-rendering =“crispEdges”来禁用antialiasing