Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Un format de dessin vectoriel en XML: SVG
Liste des fichiers associés à ce fichier HTML :
version 1.31, dernière mise à jour le 14 mars 2016.
Nous avons vu précédemment ce qu'il était possible de réaliser en SVG, uniquement de manière statique. On peut cependant ajouter de l'interactivité à un fichier SVG, et ce de deux manières :
soit en utilisant des éléments et attributs propres au format SVG -c'est ce que nous allons voir dans la suite de ce cours ;
soit en utilisant JavaScript et/ou EcmaScript, ainsi qu'un usage intensif du Document Object Model de la page.
Les possibilités d'animation d'un fichier SVG à l'aide d'éléments de la spécification sont une composante de base de cette dernière, et sont inspirées de la syntaxe du langage SMIL. Nous allons aborder ces notions de manière progressive, à partir de la réalisation d'un exemple.
Avant d'animer un graphique, encore faut-il l'avoir écrit. Nous allons donc créer un petit cube à l'aide d'une définition.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE svg SYSTEM "svg10.dtd">
<svg width="500" height="500" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="cube" stroke="black" stroke-line-join="bevel" stroke-width="2">
<rect width="100" height="100" fill="#ccc" x="1" y="42" />
<polygon points="1,42 42,1 142,1 101,42 1,42" stroke-width="2" fill="#999" />
<polygon points="101,42 142,1 142,101 101,142 101,42" fill="#666" />
</symbol>
</defs>
<use xlink:href="#cube" x="150" y="150" />
</svg>
Ce fichier va nous servir de base.
Nous allons commencer par quelque chose de simple en nous contentant de faire monter et descendre notre joli cube. L'attribut servant à gérer cette position verticale est l'attribut y. Nous allons donc travailler dessus, en l'animant à l'aide de l'élément animate. Analysons l'exemple ci-dessous...
<use xlink:href="#cube" x="150" y="150">
<animate attributeName="y" dur="2s" values="150; 140; 130; 120; 110; 100; 110; 120; 130; 140; 150" />
</use>
Comme nous pouvons le constater sur l'exemple, le cube monte et descend. L'opération se fait en ajoutant un élément-enfant animate à l'élément qu'il faut animer. L'attribut attributeName permet de sélectionner l'attribut sur lequel va porter l'animation. N'importe quel attribut peut être modifié de la sorte, à l'exception toutefois de l'attribut transform et des attributs de gestion de la couleur, dont les syntaxes de modification sont légèrement différentes.
Il est possible de faire des boucles (utilisation de l'attribut repeatCount), de commencer ou finir à des instants déterminés (attributs begin ou end), mais aussi de synchroniser différentes animations. Nous verrons cela par la suite.
Dans ce cas simple, nous avons utilisé l'attribut dur, qui fixe la durée de l'animation. Par défaut, cette dernière commence à la fin du chargement du fichier. Ici, elle dure 2 secondes.
L'attribut values donne la liste des valeurs par lesquelles passe l'attribut spécifié par attributeName. Par défaut, un lecteur SVG doit réaliser une interpolation linéaire entre chacune de ces valeurs, mais il est possible de changer ce comportement.
Il est facile d'insérer un comportement lié à la souris. Par exemple, begin="mouseover" déclenche l'animation dès que l'on survole l'élément par la souris. Nous allons plutôt créer un petit bouton, afin de tester ce genre de comportement. Il suffit pour cela de caser dans un coin un rectangle, que l'on identifie par un id="bouton", par exemple, et d'écrire dans notre élément animate un begin="bouton.click", pour obtenir l'effet voulu.
Ces deux attributs permettent de ne pas avoir à spécifier une liste de valeurs, dans le cas (comme dans notre exemple) où celles-ci sont régulièrement réparties. Quand on les spécifie, le lecteur SVG réalise une interpolation linéaire entre ces deux valeurs. On peut par exemple ajouter <animate attributeName="x" dur="3s" from="150" to="100"/> à l'animation précédente pour modifier également la position horizontale.
Dans l'exemple précédent, l'animation, après s'être exécutée, revenait à son état initial. Ce n'est parfois pas l'effet désiré. Pour figer l'animation dans son état final, on utilise l'attribut fill, avec la valeur freeze (geler, en anglais). On obtient ainsi le résultat visible sur l'exemple suivant...
On peut également demander à ce qu'une animation se répète un nombre déterminé de fois, à l'aide de l'attribut repeatCount. Cet attribut peut prendre comme valeur un nombre entier, ou bien indefinite, qui permet de boucler à l'infini. Il permet d'obtenir une animation bouclée.
Un autre exemple, plus fouillé, de ce genre d'animation nous montre cette fois-ci une collection de cubes...
La syntaxe de l'attribut transform ne se prête pas à l'utilisation de l'élément animate. Il faut utiliser un autre élément, animateTransform, avec un attribut attributeName prenant la valeur transform. Cet élément utilise un attribut, type, qui lui permet de déterminer de quel type de transformation il va s'agir. Le code suivant permet de décaler dans la direction des x et des y positifs l'élément à animer...
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0,0" to="100,100" dur="3s" />
Pour une rotation, les règles sont les mêmes que lors de l'utilisation de l'attribut transform : si on ne spécifie qu'un seul nombre, la rotation se fait de l'angle indiqué (en degrés, selon les orientations trigonométriques), par rapport à l'origine des coordonnées. Sinon, on peut également spécifier trois nombres ; le premier est l'angle de rotation, les deux autres donnent les coordonnées du centre de rotation.
Par défaut, à chaque fois que l'on ajoute une animation, celle-ci écrase celles qui ont été définies avant. Afin d'éviter ce comportement, il faut renseigner l'attribut additive avec la valeur sum (addition).
JavaScript permet de manipuler le Document Object Model de n'importe quel document balisé, basé sur le SGML, ce qui est bien sûr le cas de SVG. Il est tout à fait possible d'inclure du JavaScript dans un document SVG. Par exemple...
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="50" fill="yellow" id="rectangle" />
<script>
document.getElementById("rectangle").addEventListener("click", hop, false);
function hop(){
alert('coucou');
}
</script>
</svg>
Le SVG, quand il est inclus dans le document HTML, est par là-même inclus dans le DOM de celui-ci. Mais si l'on veut s'extraire de la notion de « document » HTML ou SVG, on comprend sans mal que du « point de vue » de JavaScript, l'ensemble constitué par leur réunion n'est qu'un type particulier de document balisé. De fait, il est aisé de faire communiquer les deux langages, ainsi que le montre l'exemple simple suivant...
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours précédent : Un format de dessin vectoriel en XML: SVG
Liste des fichiers associés à ce fichier HTML :
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.