Controlar el SMIL de SVG con JavaScript

Question

Digamos que tengo este SVG de un insecto. A menos que sea imposible de esta manera, quiero insertarlo como etiquetas <img /> o <object />.

Ahora, el insect.svg tiene dos animaciones: una para caminar y otra para volar.

Me gustaría iniciar/detener estas animaciones, individualmente, y desde el código HTML de JavaScript (o de otra manera llamar a una función SVG JS "caminar" o "volar", desde el JavaScript HTML).

Así que, al final, si durante el juego quiero que mi insecto vuele, puedo informarle que lo haga con JS, y decirle que se detenga cuando ya no debe volar. Lo mismo con caminar.

¿Hay alguna manera de hacer esto? He estado buscando en Google durante la última hora y no realicé hallazgos reales. No me importa el soporte de IE si eso es un problema.

¡Gracias por su tiempo!

Answer 1

Puede intentar usar SMIL Animation Hiperlinking. Coloca el ID de la animación que desea iniciar después de un # en la URL. Ver http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-21-t.html por ejemplo - la URL cambia cuando se hace clic en el mouse y eso inicia la animación. Si estás usando Firefox que necesita una noche como SMIL Hiperenlaces no está en Firefox 12.

De lo contrario, si desea iniciar una animación con javascript sería algo como esto ...

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

Pero esto no funcionará con un elemento <img> ya que eso no permite la creación de scripts.