避免在未对齐像素的平铺SVG矩形之间形成线条 [英] Avoid line between tiled SVG rects that are NOT pixel aligned

问题描述

我在附近有几个rect，例如此问题，但未与像素对齐.我无法更改元素位置. 例如:

I have several nearby rects like in this question, but not aligned to pixels. I can not change the element positions. 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"没有帮助.

I'm getting a thin line between the rects. shape-rendering="crispEdges" doesn't help.

添加一点重叠会有所帮助，但是会在两个抗锯齿边缘相连的垂直关节上引起可见的尖峰，因为两个重叠的rect都参与颜色融合.

Adding a bit of overlap helps a bit, but causes visible spikes on a vertical joints where two antialiased edges join, as both the overlapping rects participate in color blending.

我能做些什么吗?

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

推荐答案

好的，我会在最后回答.

OK, I'll answer in the end.

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

Adding g tag around rect-s eliminated the line — with the exception of Internet Explorer.

这篇关于避免在未对齐像素的平铺SVG矩形之间形成线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！