避免未像素对齐的平铺 SVG 矩形之间的线条答案

【问题标题】：Avoid line between tiled SVG rects that are NOT pixel aligned避免未像素对齐的平铺 SVG 矩形之间的线条
【发布时间】：2012-11-07 14:40:03
【问题描述】：

我有几个附近的rects，例如this question，但未与像素对齐。我无法更改元素位置。 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>

我在矩形之间找到了一条细线。 shape-rendering="crispEdges" 没有帮助。

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

有什么我可以做的吗？

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

【问题讨论】：

添加相同颜色的细描边是否有帮助？
我糟糕的形状渲染确实是从根 svg 元素继承的。一个有效的 jsfiddle 会有所帮助，因为您的示例代码在使用 crispEdges 时没有问题，请参阅 tinkerbin.com/wAeATCVs
我用导致这条线的原因更新了我的示例，viewBox。你的 tinkerbin 包含了答案：g 标签消除了这条线！（嗯，除了在 IE9 中）请您重新发布这个作为答案吗？
很高兴它有帮助。我认为在这种情况下正确的礼仪是回答你自己的问题，因为我仍然不确定你做了什么来纠正它！
我希望你能回答 - 你知道我错过了。

标签： svg rendering

【解决方案1】：

好的，我最后会回答的。

在rect-s 周围添加g 标记消除了这一行——Internet Explorer 除外。

【讨论】：

tinkerbin 现在已经消失了，但在我的情况下，在矩形周围添加一个普通的 g 标签在最新版本的 Chrome 中不起作用。是否有理由让 g 标签有所作为？
不知道，抱歉。我在这里完全处于黑暗之中。