Get rid of thin white lines between shape 'joins'

I've created an icon made out of basic shapes. It's 1 solid shape and has no gaps at all.

I want to use this icon as a preloader on a website as an SVG. The idea being each 'segment' (line) fades in one-by-one. So to do this I've sliced the solid shape up so each part is it's own shape (or polygon) so I can animated them individually. I've done this but there are thin white lines in between some of the shapes (image attached). I've checked the joins and I don't think I could get the shapes any closer together! The coordinates/points seem to be the same as well when I view the SVG mark-up.

Is there away to get around this? It's really going to impact the quality/sharpness of the preloader. I'm guessing I should be able to fix this somehow as I've seen plenty of more complex shapes which don't have any visible 'joins'.

Thanks, hope someone can shed some light on this ...even if it means drawing the shape again (hopefully not though).