rendering - Adjacent svg:polygon edges do not meet -

i drawing bar chart using polygons next each other this:

if closely, there white spaces between each polygon (zoomed):

i trying prevent happening. found out svg shape-rendering attribute , set geometricprecision. solved problem gave me crisp edges:

i not want either. tried other possible values shape-rendering none worked well. (i tried these on webkit.) looking solution.

for interested, jsfiddle of chart here.

really problem should rendering graph single polygon rather 1 polygon each bar, i'm assuming there reason doing way.

one possible solution set stroke properties, outline of polygons drawn, causing them overlap. can set properties on group element apply them enclosed polygons.

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

updated jsfiddle link

note makes graph biggger should be, don't think that's significant problem.

as reason why happening, because offsets of polygons aren't aligned on pixel boundaries (at least of time). if fixed svg width @ multiple of 300px (thus aligning on pixel boundaries) gaps should go away.

consider 4x4 pixel area, trying render square (0,0) (2.5,2.5) this:

you can paint pixels (0,0) (1,1) in solid black, how handle edges - they're neither black nor white. anti-aliasing solution use shade of grey proportional how of pixel covered.

but when try , render polygon right next first 1 (i.e. starting @ offset of 2.5), going have same issue anti-aliasing left hand edge. it'll darker time since background grey rather white.

as have found, can disable effect setting different shape-rendering option, lose benefit of anti-aliasing on sloped lines, making edges jagged.