La librairie SVGAnimation définit le prototype javascript Animation. Pour l'utiliser il faut déclarer une balise HTML div avec un identifiant (id) unique. Choisissons pour l'exemple XXXX. À l'intérieur de ces balises, il faut : * une balise img contenant un image svg qui servira de vignette à l'animation; * une balise div avec l'identifiant id="XXXX_message" où XXXX est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation; * une balise div avec l'identifiant id="XXXX_boutons".
La librairie SVGAnimation définit le prototype javascript Animation. Pour l'utiliser il faut déclarer une balise HTML div avec un identifiant (id) unique. Choisissons pour l'exemple XXXX. À l'intérieur de ces balises, il faut :
img contenant un image svg qui servira de vignette à l'animation;div avec l'identifiant id="XXXX_message" où XXXX est l'identifiant de la balise englobante. Dans cette balise message, on y met, si on le souhaite, un message à afficher avant le chargement de l'animation;div avec l'identifiant id="XXXX_boutons".En supposant que les images SVG se trouvent dans un répertoire nommé svg, voici un exemple d'une telle structure :
<div id="anim1">
<img src="svg/ellipsographe-1.svg" alt="animation1"/>
@@ -116,7 +121,7 @@ Chargement...
b.connect();
}Fonction qui sera liée à l'événement onclick d'un bouton proposant, à l'internaute, le chargement de l'animation...
<div id="anim2"
+<div id="anim2"
style="margin:10px auto;padding:10px;width:354px;border:2px solid #AAA;border-radius:4px">
<img src="../ellipsographe/svg/ellipsographe-1.svg" alt="animation1" style="width:330px;height:240px"/>
<div class="message" id="anim2_message">Ellipsographe</div>