Adjacent svg:polygon edges do not meet

Question

I am drawing a bar chart using polygons next to each other like this:

If you look closely, there are white spaces between each polygon (zoomed):

I am trying to prevent this from happening. I found out SVG shape-rendering attribute and set it to geometricPrecision. This solved the problem but gave me very crisp edges:

I do not want that either. I tried other possible values for shape-rendering but none worked well. (I tried these on WebKit.) I am looking for a solution.

For those interested, jsFiddle of the chart here.

Answer 1

I found a definitive and elegant solution for this problem. Convert your multiple polygons into a path with multiple segments:

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg width="100%" height="30%" viewBox="0 0 100 100" preserveAspectRatio="none">
        <path d="M0,100 0,70 3.3333333333333335,66 3.3333333333333335,100 M3.3333333333333335,100 3.3333333333333335,66 6.666666666666667,66 6.666666666666667,100 M6.666666666666667,100 6.666666666666667,66 10,62 10,100 M10,100 10,62 13.333333333333334,57.99999999999999 13.333333333333334,100 M13.333333333333334,100 13.333333333333334,57.99999999999999 16.666666666666664,56 16.666666666666664,100 M16.666666666666664,100 16.666666666666664,56 20,54 20,100 M20,100 20,54 23.333333333333332,40 23.333333333333332,100 M23.333333333333332,100 23.333333333333332,40 26.666666666666668,24 26.666666666666668,100 M26.666666666666668,100 26.666666666666668,24 30,15.999999999999998 30,100 M30,100 30,15.999999999999998 33.33333333333333,13.999999999999996 33.33333333333333,100 M33.33333333333333,100 33.33333333333333,13.999999999999996 36.666666666666664,11.999999999999996 36.666666666666664,100 M36.666666666666664,100 36.666666666666664,11.999999999999996 40,10.000000000000004 40,100 M40,100 40,10.000000000000004 43.333333333333336,10.000000000000004 43.333333333333336,100 M43.333333333333336,100 43.333333333333336,10.000000000000004 46.666666666666664,8.000000000000004 46.666666666666664,100 M46.666666666666664,100 46.666666666666664,8.000000000000004 50,8.000000000000004 50,100 M50,100 50,8.000000000000004 53.333333333333336,6.000000000000002 53.333333333333336,100 M53.333333333333336,100 53.333333333333336,6.000000000000002 56.666666666666664,6.000000000000002 56.666666666666664,100 M56.666666666666664,100 56.666666666666664,6.000000000000002 60,8.000000000000004 60,100 M60,100 60,8.000000000000004 63.33333333333333,10.000000000000004 63.33333333333333,100 M63.33333333333333,100 63.33333333333333,10.000000000000004 66.66666666666666,8.000000000000004 66.66666666666666,100 M66.66666666666666,100 66.66666666666666,8.000000000000004 70,11.999999999999996 70,100 M70,100 70,11.999999999999996 73.33333333333333,13.999999999999996 73.33333333333333,100 M73.33333333333333,100 73.33333333333333,13.999999999999996 76.66666666666667,11.999999999999996 76.66666666666667,100 M76.66666666666667,100 76.66666666666667,11.999999999999996 80,10.000000000000004 80,100 M80,100 80,10.000000000000004 83.33333333333334,11.999999999999996 83.33333333333334,100 M83.33333333333334,100 83.33333333333334,11.999999999999996 86.66666666666667,13.999999999999996 86.66666666666667,100 M86.66666666666667,100 86.66666666666667,13.999999999999996 90,11.999999999999996 90,100 M90,100 90,11.999999999999996 93.33333333333333,4.000000000000002 93.33333333333333,100 M93.33333333333333,100 93.33333333333333,4.000000000000002 96.66666666666667,0 96.66666666666667,100 M96.66666666666667,100 96.66666666666667,0 100,0 100,100 M100,100 100,0 100,0 100,100"/>
</svg>

http://jsfiddle.net/313xc6bg/

It won't work however if you want to apply different effects to each segments though. In this case, the workaround I think would be to add a stroke wide enough to cover the white spaces while keeping the AA on.

Also, I still had issues with Safari (only) with respect to the order of the points in different polygons. Changing the order (i.e. clockwise to anti-clockwise) fixed the problem.

Answer 2

Really the problem is that you should be rendering the graph as a single polygon rather than one polygon for each bar, but I'm assuming there is a reason you are doing it this way.

One possible solution is to set the stroke properties, so the outline of the polygons are drawn, causing them to slightly overlap. You can set those properties on the group element to apply them to all the enclosed polygons.

<g stroke-width="0.5" stroke="black" stroke-linejoin="round">

Updated jsFiddle link

Note that this makes the graph look slightly biggger than it should be, but I don't think that's a significant problem.

As for the reason why it is happening, that is because the offsets of your polygons aren't exactly aligned on pixel boundaries (at least most of the time). If you fixed the svg width at a multiple of 300px (thus aligning everything on pixel boundaries) the gaps should go away.

Consider a 4x4 pixel area, where you are trying to render a square from (0,0) to (2.5,2.5) like this:

You can paint the pixels from (0,0) to (1,1) in solid black, but how do you handle the edges - they're neither completely black nor completely white. The anti-aliasing solution is to use a shade of grey proportional to how much of the pixel is covered.

But then when you try and render another polygon right next to the first one (i.e. starting at an offset of 2.5), you are going to have the same issue anti-aliasing the left hand edge. Only it'll be slightly darker this time since the background is grey rather than white.

As you have found, you can disable this effect by setting a different shape-rendering option, but then you lose the benefit of the anti-aliasing on sloped lines, making those edges look jagged.