inline-SVG анимация лучшая практика

Question

Каков способ анимации встроенных SVG? Я хочу сделать некоторые анимации на дорожках. Подобно вращению на каком-либо событии, animateMotion на нескольких путях также инициируется некоторым событием.

Включая ссылку на Dev-site: http://www.myradon.net. Я пытаюсь выполнить следующее;

Когда вилка питания подключена (чуть выше «портфолио») к женскому (теперь подключенному на веб-сайте), более толстые тире будут перемещаться сверху вниз вплоть до нижней части страницы (визуализируется на текущий момент). Я думаю, что анимация пути на этих пунктирных линиях (так что скорость зависит от длины пути и должна начинаться, когда заканчивается предыдущий). Пунктирные линии - это дюжина SVG, вставленных jQuery в Ajax-вызов.

У кого-нибудь есть яркие идеи, как с этим бороться? SMIL, Raphael/D3.js (SVG уже находятся в DOM)? Редактировать: Кстати, меня не волнует IE8 и меньше.

Answer 1

Анимированные анимации, основанные на Javascript, помогут вам поддерживать все браузеры, и это довольно легко сделать с такими lib, как d3.js или raphaël (есть много примеров, доступных онлайн для обеих библиотек).

В зависимости от того, сколько интерактивности вам нужно, вы можете использовать SVG Animation (SMIL) и предоставить резерв js, такой как FakeSMILe (для IE). Если графическое изображение состоит в основном из простых анимаций, и не столько взаимодействие таким образом может иметь больше смысла, так как это может быть проще редактировать графику с помощью графического редактора.