any workarounds for a chrome SVG animation bug?

107 views
Skip to first unread message

BL

unread,
Mar 23, 2012, 6:28:01 PM3/23/12
to SVG Web
I'm not actually using SVGweb, just vanilla SVG but this seems like
the best help resource out there, so here goes. This jsfiddle:

http://jsfiddle.net/VjMvz/

Has a handcoded animation of a flower, with the petals drawn
sequentially, accomplishing by animating stroke-dashoffset over the
length of the path. Yah, so I know there's a lot of code there, but
the short if it is that it's all HTML and inline SVG, no javascript.
(I'm using javascript to generate the file, but for this and also for
final deployment I'm just copying the generated source to reduce
dependency and bloat.)

The animation works as expected in FF10, Safari 5. Check it out. But
it breaks in IE9 (no huge surprise I guess) and (gasp) Chrome 18, in
which the petals flutter and disappear.

I'm pretty crushed to realize this, because I've gotten a week into a
much bigger illustrator file, and my earlier tests suggested that this
approach to was going to work for an animation. I'm actually okay with
not supporting IE, but not supporting Chrome is just painful. Forcing
Chrome to use Flash seems ridiculous (?!), and I'm not even sure how
to go about that.

On a bigger level, a lot of the info about SVG is just seriously
dated, from the heyday of XHMTL. Even SVGweb honestly doesn't look
like it's been touched for over a year. I can't really tell if it's
mission is accomplished, or its mission turned out to be impossible.
So. . . I'm hoping to get a little expert guidance in the year 2012
about how an animation like this might be made to work on modern
browsers.

Any suggestions on my project seriously appreciated. :)
Reply all
Reply to author
Forward
0 new messages