避免在未像素对齐的平铺 SVG 矩形之间出现线条

我附近有几个rect就像在这个问题 https://stackoverflow.com/questions/13049336/avoid-line-between-tiled-svg-shapes，但未与像素对齐。我无法更改元素位置。例如 http://tinkerbin.com/73t2Oz33:

<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>​

我在直肠之间有一条细线。shape-rendering="crispEdges"没有帮助。

添加一点重叠会有所帮助，但会在两个抗锯齿边缘连接的垂直关节上产生可见的尖峰，因为两个重叠的矩形都参与颜色混合。

有什么我可以做的吗？

好吧，这些矩形具有相同的颜色，所以我可以引入一些智能算法将相邻的矩形连接成一个形状。这是一种干净但困难的方法。

好吧，我最后回答一下。

Adding g标记周围rect-s 消除了该行 — Internet Explorer 除外。