Animate SVG paths using js/jQuery

I have output an svg file from adobe illustrator which is great and have now embedded开发者_如何学C 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

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