Управление SMIL SVG с помощью JavaScript

Question

Предположим, у меня есть этот SVG насекомого. Если иначе это невозможно, я хочу вставить его как <img /> или <object /> тегов.

Теперь у insect.svg есть две анимации: одна для ходьбы и другая для полета.

Я хотел бы начать/остановить эти анимации индивидуально и с помощью JavaScript JavaScript (или иначе вызвать встроенную функцию SVG JS «ходить» или «летать» из HTML-кода JavaScript).

Итак, в конце, если во время геймплея я хочу, чтобы мое насекомое летало, я могу просто сообщить ему об этом с помощью JS и сказать ему остановиться, когда он больше не должен летать. То же самое с ходьбой.

Есть ли способ сделать это? Я был в Googling в течение последнего часа и не делал никаких реальных результатов. Я не забочусь о поддержке IE, если это проблема.

Благодарим вас за внимание!

Answer 1

Вы можете попробовать использовать SMIL Animation Hyperlinking. Вы помещаете идентификатор анимации, которую хотите запустить после # в URL-адресе. См., Например, http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-21-t.html - URL-адрес изменяется при щелчке мыши и запускает анимацию. Если вы используете Firefox, вы будете нуждаться в ночные, как SMIL гиперссылок не в Firefox 12.

В противном случае, если вы хотите, чтобы начать анимацию с Javascript, что бы что-то вроде этого ...

var svgDocument = document.getElementById("objectId>").getSVGDocument(); 
svgDocument.getElementById('<animationElementId>').beginElement(); 

Но это не будет работать с элементом <img>, поскольку это не позволяет создавать сценарии.