Анимировать SVG-пути с помощью js / jQuery

Question

Я вывел SVG-файл из Adobe Illustrator, который великолепен, и теперь встроил этот SVG-файл в мою HTML-страницу, SVG содержит множество различных путей, которые я хотел бы индивидуально анимировать с помощью JQuery и без использования плагина, но я Я не совсем уверен, как этого добиться, поскольку я не знаю, как использовать svg. Может ли кто-нибудь пролить свет на то, как к этому следует подходить?

Спасибо Кайл

Answer 1

jQuery не совместим с SVG API, но ванильный JS работает хорошо.

Для анимации вы должны сначала получить доступ к элементам / объектам SVG. Это требует, чтобы скрипты SVG обслуживались из одного домена. Как это сделать можно найти здесь в предыдущих ответах на SO.

Для анимации вы можете ...

• создайте SVG-элементы анимации, добавьте их в SVG DOM и привяжите их к вашим путям / элементам. См http://www.w3.org/TR/SVG/animate.html.

• сделать это программным путем, непосредственно изменяя матрицы, которыми владеют все элементы. Смотри http://www.w3.org/TR/SVG/coords.html