I have several nearby rect
s 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.
crispEdges
see tinkerbin.com/wAeATCVsviewBox
. And your tinkerbin contained the answer: theg
tag eliminated the line! (well, except for in IE9) Will you please repost this as an answer?