覆蓋兩個相同的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：我對黑客不感興趣，因爲使底部的矩形更小等。這僅僅是一個例子，真正的用例更復雜，不能通過調整大小來解決。

Answer 1

這是歸結爲抗鋸齒。當繪製第一個矩形時，它將與背景混合，稍微塗抹它。與第二個一樣，你會得到一個灰色的輪廓。

如果你想避免這種情況，一種方法是用形狀渲染=「crispEdges」