Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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
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