I'm struggle with SVG animation drawing, which is work perfectly on all browsers (even IE has no problems with that), only firefox not drawing correctly
Script it self work on all modern browsers Script took from - http://tympanus.net/Development/SVGDrawingAnimation/
But when I generate SVG code from vector image it does not work on firefox Example - CODEPEN
It is 100% svg path issue, something with code. But what?
If you look at the <path> styles in your Firefox DOM inspector, you'll see that it is refusing to parse some of the stroke-dasharray values. Without the dash pattern, you won't see the animation on those paths.
In particular, the paths that Firefox is having a problem with are all reporting total lengths in the billions of units. Now, there's nothing in the specs that says that path lengths and dash patterns can't be billions of units long, but it is not unreasonable that the Firefox implementation only works up to a certain maximum.
What is unreasonable is that Firefox is calculating such extreme path lengths in the first place. For example, for the first path in the drawing FF28 reports the path length as 308225966080, while Chrome calculates it as around 920.6.
Turns out that the problem with getTotalLength is a known bug in Firefox 28. Hopefully it will be fixed soon!
