SVG : Animation contrôlée par le visiteur

Animation déclenchée par le visiteur

Cliquez sur le carré de couleur orange pour démarrer l'animation de ce dernier !

Le code SVG correspondant à cette animation

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <rect x="0" y="0" width ="50" height ="50" fill ="orange"> <animate attributeType ="XML" attributeName="width" values = "50;400;50" begin="click" dur="20s" repeatCount="indefinite"/> <animate attributeType ="XML" attributeName="height" values = "50;400;50" begin="click" dur="20s" repeatCount="indefinite"/> </rect> </svg>

Commentaire

La conteneur rect contient deux fois la balise animate car il y a animation de l'attribut width et de l'attribut height pour le même objet SVG.
Remarquez que dans chaque balise animate l'attribut begin a la valeur click !
Il s'agit donc d'un animation déclenchée (par le visiteur) et non pas d'une animation automatique comme dans la page précédente.
L'attribut repeatCount a la valeur indefinite. Donc dès que l'animation est déclenchée elle se répète de façon infinie.

Animation arrêtée par le visiteur

Cliquez sur le carré de couleur verte pour stopper l'animation de celui-ci !

Le code SVG correspondant

<svg width="50%" height="auto" viewBox ="0 0 400 400"> <rect x="0" y="0" width ="50" height ="50" fill ="green"> <animate attributeType ="XML" attributeName="width" values = "50;400;50" begin="0s" dur="20s" repeatCount="indefinite" end ="click"/> <animate attributeType ="XML" attributeName="height" values = "50;400;50" begin="0s" dur="20s" repeatCount="indefinite" end ="click"/> </rect> </svg>

Commentaire

L'animation sur le carré vert est déclenchée automatiquement (lors du chargement de la page) mais le visiteur peut la stopper à tout moment en cliquant sur l'objet car emploi de l'attribut end avec la valeur click.

Nous avons donc introduit ici un nouvel attribut pour la balise animate : l'attribut end qui est prioritaire sur l'attribut repeatCount : l'animation se répète à l'infini tant qu'on ne clique pas le carré.

Notez qu'après avoir cliqué sur le carré vert ce dernier reprend sa taille initiale car je n'ai pas utilisé l'attribut fill ="freeze" (gel de l'animation).

Animation démarrée et stoppée par le visiteur

Pour démarrer l'animation cliquez sur le bouton vert légendé "go".
Pour arrêter l'animation il faut cliquer sur le bouton rouge légendé "stop".

L'animation se répète à l'infini : ellipse est de plus en plus large et de plus opaque puis c'est l'inverse.
L'objet garde la taille et l'opacité atteinte lors de l'arrêt de l'animation.

Le code correspondant

Attention ici il s'agit d'une image vectorielle animée insérée dans la page via la balise object et non pas de code SVG écrit directement dans la page.

Le code du fichier SVG ci-dessous :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox = "0 0 400 200" width = "100%" height = "auto" > <title>Ellipse animee</title> <desc>Ellipse qui change de rayon horizontal et d'opacite</desc> <ellipse cx="150" cy="75" rx="10" ry="40" fill="olive"> <animate attributeName="rx" begin="go.click" end="stop.click" dur="8s" values="10;110;10" repeatCount="indefinite" fill ="freeze"/> <animate attributeName="fill-opacity" begin="go.click" end="stop.click" dur="8s" values="0.2;1;0.2" repeatCount="indefinite" fill ="freeze"/> </ellipse> <desc>Boutons de commande</desc> <g id="go"> <rect x="85" y="130" height="20" width="60" fill="green"/> <text x="90" y="148" font-size="20" fill="white">GO</text> </g> <g id="stop"> <rect x="150" y="130" height="20" width="60" fill="red"/> <text x="155" y="148" font-size="20" fill="white">STOP</text> </g> </svg>

Il faut dessiner une ellipse et en dessous deux boutons de commande avec texte.
Les boutons de commande sont identifiés "go" et "stop".

La balise ellipse contient donc deux balises animate.
Remarquez la valeur des attributs begin et end dans ces balises : "go.click" "stop.click".
Retour menu