Controlando SMIL de SVG con JavaScript

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

Ahora, la insecto.svg tiene dos animaciones: una para caminar y otra para volar.

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

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

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

Gracias por tu tiempo!

preguntado el 22 de mayo de 12 a las 15:05

1 Respuestas

Puede intentar usar hipervínculos de animación SMIL. Pones la identificación de la animación que deseas 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 con el mouse y eso inicia la animación.

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 <img> elemento ya que no permite secuencias de comandos.

Respondido el 28 de junio de 19 a las 10:06

obtenerSVGDocumento, dulce. Entonces, para que quede claro, la única forma de interactuar con el DOM SVG es incrustar el código SVG en HTML, ¿verdad? - ArtPulse

En absoluto, la respuesta anterior asume que has usado como usted pidió. - Roberto Longson

Oh, perfecto entonces. Gracias por tu ayuda. - ArtPulse

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.