Contrôler le SMIL de SVG avec JavaScript

Question

Disons que j'ai ce SVG d'un insecte. À moins que ce soit autrement impossible de cette façon, je veux l'insérer comme <img /> ou <object /> étiquettes.

Maintenant, le insect.svg a deux animations: une pour la marche et l'autre pour le vol. Je voudrais démarrer/arrêter ces animations, individuellement, et à partir du JavaScript HTML (ou appeler autrement une fonction SVG JS intégrée "marcher" ou "voler", à partir du JavaScript HTML). Donc, à la fin, si pendant le gameplay je veux que mon insecte vole, je peux juste l'informer de le faire avec JS, et lui dire d'arrêter quand il ne devrait plus voler. Pareil avec la marche.

Y at-il un moyen de le faire? J'ai été googling pour l'heure passée et n'ai fait aucune vraie constatation. Je ne me soucie pas du support IE si c'est un problème.

Nous vous remercions de votre temps!

Answer 1

Vous pourriez essayer d'utiliser SMIL Animation Hyperlinking. Vous mettez l'ID de l'animation que vous voulez démarrer après un # sur l'URL. Voir http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-animate-elem-21-t.html par exemple - l'URL change quand on clique sur la souris et que l'animation commence. Si vous utilisez Firefox, vous aurez besoin d'une nuit comme SMIL est Hyperliens pas dans Firefox 12.

Sinon, si vous voulez démarrer une animation avec le javascript, il irait quelque chose comme ça ...

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

Mais cela ne fonctionnera pas avec un élément <img> car cela ne permet pas l'écriture de scripts.