Animation de clones avec le SMIL

Deux boules ombrées se déplacent selon les deux axes en 10 secondes.
Pour la boule blanche l'animation est perpétuelle mais démarre deux secondes après le chargement de la page.
Quant à la boule rouge, l'animation ne dure que 25 secondes et la boule reste à l'emplacement atteint au bout de cette durée.

Le code SVG : définition de modèles

<svg width="100%" height="auto" viewBox ="0 0 900 120" style ="background : lime ;margin :10px auto 10px auto ; box-shadow : 5px 5px 5px grey ;" > <defs> <g id ="blanche"> <circle r="10" fill ="gray" cx ="4" cy ="4"/> <circle r="10" fill ="white" cx ="0" cy ="0" /> </g> <g id ="rouge"> <circle r="10" fill ="gray" cx ="4" cy ="4"/> <circle r="10" fill ="red" cx ="0" cy ="0" /> </g> </defs>

On définit deux modèles identifiés rouge et blanche.
Chaque modèle est en fait constitué de deux ronds : un rond gris (l'ombre) et un rond rouge ou blanc.
Il faut bien sur dessiner d'abord l'ombre puis le rond rouge ou blanc afin qu'il soit en premier plan. Le rond rouge ou blanc devant être décalé de 4 pixels vers le haut et vers la gauche par rapport au rond gris.

Le code SVG (suite) : clonage et animation des clones (extraits)

<use xlink:href ="#rouge"> <animate attributeName="x" values = "-20;100;300;500;700;920" begin ="0s" dur="10s" attributeType ="XML" repeatCount="indefinite" repeatDur ="25s" fill ="freeze" /> <animate attributeName="y" values = "60;0;110;0;110;60" begin = '0s' dur ="10s" attributeType ="XML" repeatCount="indefinite" repeatDur ="25s" fill ="freeze" /> </use> <use xlink:href ="#blanche"> <animate ... begin ="2s" dur="10s" /> <animate ... begin = '2s' dur ="10s" /> </use> </svg>

On clone et on anime chaque modèle avec changement des coordonnées X et Y.

Donc ici la grande nouveauté syntaxique est la balise animate contenue dans la balise use.

Notez l'emploi dans la balise animate de l'attribut fill avec la valeur "freeze" (on parle de "gel de l'animation").

L’attribut fill de animate (ne doit pas être confondu avec l’attribut fill définissant la couleur de remplissage d’une forme) a comme valeur par défaut "remove" (retour à la situation de départ).

Remarque : pour l'animation de la boule blanche (clone du modèle "blanche") je vous communique seulement des bribes de code.
Comme l'animation est perpétuelle (pas de repeatDur et repeatCount à indefinite) l'attribut fill sera ici inutile !
Retour menu