3

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.

5
  • Does it help to add a thin stroked outline of the same color?
    – Thomas W
    Nov 19, 2012 at 17:28
  • My bad, shape-rendering is indeed inherited from a root svg element. A working jsfiddle would help as your example code has no problems rendering sharp with crispEdges see tinkerbin.com/wAeATCVs Nov 20, 2012 at 10:01
  • I updated my sample with what was causing the line, a viewBox. And your tinkerbin contained the answer: the g tag eliminated the line! (well, except for in IE9) Will you please repost this as an answer? Nov 20, 2012 at 14:23
  • Glad it helped. I think the correct etiquette in this case would be to answer your own question as I'm still not sure what you did to correct it! Nov 21, 2012 at 2:54
  • I'd prefer if you answer - it's your knowledge that I was missing. Nov 21, 2012 at 11:23

1 Answer 1

0

OK, I'll answer in the end.

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

2
  • the tinkerbin is gone by now, but adding a plain g tag around the rectangles does not work in latest-version Chrome in my case. Is there a reason a g tag should make a difference?
    – matanster
    Apr 29, 2014 at 21:01
  • No idea, sorry. I was completely in the dark here. Apr 30, 2014 at 7:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.