SVG Animation And Firefox

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

Solution 1:

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!