Pour alléger la taille des images SVG lorsqu'il y a en beaucoup (ici 721), le fond de l'animation a été séparé de la partie variable. En plaçant le fond comme background du div qui contient l'animation on reconstitue la vue souhaitée.
Fabrication séparée grâce à MetaPost
Pour assurer la parfaite superposition des images et du fond il a été nécessaire de border toutes les images, fond y compris, par un même cadre blanc.
Le code MetaPost est disponible en bas de page. Le fond produit est l'image astro-000.svg.
Le code CSS
On met l'image en fond du div englobant grâce à un peu de code CSS.
#anim1 {
position:relative;
margin: 10px auto;
width: 652px;
padding: 0;
background:url(svg/astro000.svg);
background-repeat:no-repeat;
background-size:652px 572px;
}Le code HTML
Le code HTML est le suivant :
<div id="anim1">
<img src="svg/astro001.svg" alt="animation1"
style="top:0;left:0;width:652px;height:572px"/>
<div class="message" id="anim1_message">Images en cours de
chargement...</div>
<div id="anim1_boutons"></div>
</div>Le code JavaScript
L'animation est construite par une instance d'Animation et contrôlée par une instance de SVGPlayerButtons. Ce player est configurable et propose une palette étendue d'actions, en particulier son option full.
$(window).load(function() {
a1 = new Animation('anim1','svg/astro',1,721);
a1.delai = 40;
a1.pad = 3;
a1.loopOnload();
b1 = new SVGPlayerButtons(a1);
b1.style('full');
b1.connect();
});