Gaps between svg paths

[grimski]

This is a bit of an svg/css hybrid question!

I’ve created a graphic in Adobe Illustrator which is made out of 4 separate simple shapes, all straight vertical or diagonal lines. The reason they’re broken up into separate shapes is so I can animate each part using CSS on a webpage.

The coordinates/points where 2 shapes meet of are identical, or as far as I can see they are. I’ve even tried using “Align to pixel grid” as well. But when I export to SVG there are very fine gaps between some of the ‘joins’. I’ve uploaded the SVG to Codepen so I can give an example: http://codepen.io/moy/pen/yyvVZm

I can’t actually see it in the Codepen example but locally where the 2 vertically straight lines join (where the 2 shades of colour meet) have a small gap too and they should be flush with each other and from what I can see they have the same ‘point value’ in the SVG code?

Hope someone can help!
Steve

[Paulie_D]

Could be a sub-pixel / rounding issue…I only see it a certain zoom levels in Chrome.

One question though…why 5 paths and not just 3?

[Paulie_D]

It’s the vertical joins that get me, like 2 div’s side-by-side, I assumed they’d be flush!

I would have thought so too but unless it’s an actual decimal precision thing, I’m not sure how to resolve it.

EDIT:

I had a thought….what about the stroke on the path?

So I added that (same color as fill) and it looks like that might be a ‘fix’.

http://codepen.io/Paulie-D/pen/myXawb?editors=010

Alternatively, perhaps setting it to 0

the stroke-width attribute specifies the width of the outline on the current object. Its default value is 1. If a percentage is used, the value represents a percentage of the current viewport. If a value of 0 is used the outline will never be drawn.

[Author]

Posts