避免在非像素对齐的平铺SVG rects之间划线

Question

我在this question中有几个rect附近，但没有与像素对齐。我无法改变元素位置。 For instance：

<svg width="326.01071" height="255.5332" xmlns="http://www.w3.org/2000/svg"
   viewBox="18 18 41 41"
>
    <rect x="21" y="21" width="51" height="3" fill="black" class="crisp" />
    <rect x="21" y="24" width="30" height="3" fill="black" class="crisp" />
    <rect x="21" y="41" width="51" height="3" fill="black" />
    <rect x="21" y="44" width="30" height="3" fill="black" />
</svg>​

我在rects之间划了一条细线。 shape-rendering="crispEdges"无效。

添加一些重叠会有所帮助，但会导致两个抗锯齿边连接的垂直关节出现明显的尖峰，因为两个重叠的参与都会参与颜色混合。

我能做些什么吗？

嗯，rects是相同的颜色，所以我可以引入一些智能算法将相邻的rects连接成一个形状。这是一个干净但困难的方式。

Answer 1

好的，我最后会回答。

在g周围添加rect标记消除了该行 - Internet Explorer除外。