Avoid line between tiled SVG rects that are NOT pixel aligned

问题

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

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

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.

Is there anything I can do?

Well, the rects are of the same color, so I can introduce some intelligent algorithm to join the adjacent rects into one shape. That's one clean, but hard way.

回答1:

OK, I'll answer in the end.

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

来源：https://stackoverflow.com/questions/13457803/avoid-line-between-tiled-svg-rects-that-are-not-pixel-aligned