Animate SVG Path Data

Question

I am trying to animate an SVG's path data attribute using jQuery.

At the moment, I have created the SVG, and stored two paths, with a button that adds an animate element.

I have success when I alter the attribute directly (shown by the first svg), though the animate doesn't alter anything on the second svg.

$('.svg2 svg path').append('<animate attributeName="stroke-dasharray" from="'+OrigPath+'" to="'+NewPath+' dur="4" repeatCount="1">');

Any help would be great. Here is the fiddle : http://jsfiddle.net/vB8tu/1/

See http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element — Thomas W, Nov 21 '13 at 19:42

score -1 · Answer 1 · answered Nov 21 '13 at 19:40

-1

Using jQuery like that to add elements doesn't work. It is because jQuery is using the HTML namespace for the new elements, rather than the SVG one.

You will need to use something like jQuerySVG to create and add the new elements.

answered Nov 21 '13 at 19:40

Paul LeBeau

1 Answers1