0

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?

2
  • It works OK for me in FF 23.0.1. It seems FF has a version 24, but for some reason it won't update automatically from my 'about' window. Apr 6, 2014 at 15:34
  • i've got FF 28 and it dont work. Animation of course, cuz svg itself working.
    – Szymon
    Apr 6, 2014 at 15:46

1 Answer 1

2

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.