Animate SVG paths using js/jQuery

Question

I have output an svg file from adobe illustrator which is great and have now embedded that svg file in my html page, the svg contains lots of different paths that I would like to individually animate using jquery and without using a plugin but Im not entirely sure how to achieve this as I have no knowledge of using svg, can anyone shed some light on how this should be approached?

Thanks Kyle

Answer 1

jQuery isn't compatible with the SVG API but vanilla JS works well.

For animation you must first get access to your svg elements/objects. This requires the SVG scripts are served from the same domain. How to do it can be found here in previous answers on SO.

For animation you can...

• create SVG animation elements, add them to the SVG DOM and bind them to your paths/elements. See http://www.w3.org/TR/SVG/animate.html.

• do it programmatically by directly changing the matrices all elements own. See http://www.w3.org/TR/SVG/coords.html