Accueil
Mes tutoriels sur la programmation

Dessiner avec SVG - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

SVG & SMIL : la balise animateTransform

La balise ANIMATE ne s'applique pas aux transformations (rotation, translation, changement d'échelle ou inclinaison). Il faut utiliser la balise animateTransform et préciser le type de transformation.
Avant d'aborder la balise animateTransform revoyez éventuellement la page sur "les transformations" dans le même tuto.

AnimateTransform avec type ="scale"

Le code CSS et SVG correspondant

... <style> polygon{ stroke-width:6px; fill : none ; stroke-linejoin : round ; } ... <svg width="50%" height="auto" viewBox ="0 0 300 300"> <polygon points="0,0 100,0 0,100" stroke = 'grey'> <animateTransform attributeName="transform" type="scale" values = "1;3;1" begin="0s" dur="20s" repeatCount="indefinite"/> </polygon> </svg> ...

Commentaire

Premier exemple d'emploi de la balise animateTransform avec la valeur de type à scale.
Il s'agit de faire varier la taille d'un triangle rectangle. Donc le conteneur polygon contient la balise animateTransform.
Notez les valeurs de l'attribut values : la taille triple pour revenir à la taille originale durant un cycle.

AnimateTransform avec type = "translate"

Exemple 1

Un carré se déplace le long de la diagonale jusqu'à disparaître.

Le code CSS et SVG correspondant :

... <style> rect {fill : green ; stroke-width : 10px ; } ... <svg width="50%" height="auto" viewBox ="0 0 400 400"> <rect x="0" y="0" width="100" height="100" stroke = 'grey' > <animateTransform attributeName="transform" type="translate" from="0,0" to ="400,400" begin="0s" dur="20s" repeatCount="indefinite"/> </rect> </svg> ...

Donc les coordonnées du coin supérieur gauche du carré passent de 0,0 à 400,400.

Exemple 2

Le carré se déplace le long de la diagonale mais doit rebondir lorsqu'il atteint l'angle inférieur droit !

Le code SVG :

Il est identique au code de l'exemple précédent mais il faut remplacer les attributs from et to par values !
Extrait du code :

...values ="0,0;300,300;0,0" ...

Trois paires de valeurs pour l'attribut values donc coordonnées du coin haut gauche du rectangle : 0,0 puis 300,300 pour revenir à 0,0

AnimateTransform avec type = "rotate"

Le code CSS et SVG correspondant

... <style> svg {box-shadow : grey 5px 5px 5px ; } line {stroke:black; stroke-linecap:round; } #secondes{stroke-width:6px;} #trotteuse{stroke-width:3px ;} ... <svg width ="50%" height ="auto" viewBox ="0 0 400 300"> <line id="secondes" x1="200" y1="150" x2="200" y2="100"> <animateTransform attributeName="transform" type="rotate" from="0,200,150" to ="360, 200, 150" begin="0s" dur="60s" repeatCount="indefinite"/> </line> <line id="trotteuse" x1="200" y1="150" x2="200" y2="70"> <animateTransform attributeName="transform" type="rotate" from="0,200, 150" to="360, 200, 150" begin="0s" dur="1s" repeatCount="indefinite"/> </line> </svg> ...

Commentaire

Pour simuler une rotation d'aiguille il faut utiliser le conteneur line incluant la balise animateTransform. Cette dernière précise le type de transformation ; ici rotate !
Ici il faut une rotation complète de la ligne autour d'un point (centre du canevas).
Dans les attributs from et to la première valeur indique l'angle. Donc ce dernier passe de 0 à 360. Par contre les coordonnées du point de rotation ne changent pas (le centre du canevas : 200,150).
Il y a deux aiguilles. La trotteuse fait un tour complet en 1 seconde et l'aiguille des secondes fait un tour complet en 60 secondes.

AnimateTransform avec type ="skewX"

Inclinaison à droite puis à gauche du polygone.

Le code SVG correspondant :

<svg width="60%" height="auto" viewBox ="0 0 600 200" > <rect x ="200" y ="50" width ="100" height ="100" stroke = 'grey'> <animateTransform attributeName="transform" type="skewX" values = "1;45;1;-45" begin="0s" dur="20s" repeatCount="indefinite"/> </rect> </svg>

AnimateTransform avec type ="skewY"

Inclinaison en bas puis en haut du polygone.

Le code SVG correspondant :

<svg width="60%" height="auto" viewBox ="0 0 600 300"> <rect x ="200" y ="100" width ="100" height ="100" stroke = 'grey'> <animateTransform attributeName="transform" type="skewY" values = "1;15;1;-15" begin="0s" dur="20s" repeatCount="indefinite"/> </rect> </svg>

Une belle horloge

Le code de ce fichier SVG (extrait)

... <svg width="100%" height="auto" viewBox ="0 0 200 200" ... > <title>Horloge</title> <style> line {stroke : black;} </style> <defs> <desc>Les trois aiguilles</desc> <line id="Heure" x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: black;"/> <line id="Minute" x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: black;"/> <line id="Seconde" x1="100" y1="100" x2="100" y2="5" style="stroke-width: 2px; stroke: red;"/> </defs> <g> <desc>Le cadran</desc> <circle id="circle" style="stroke: black; stroke-width :2px ; fill: #d6d3ce;" cx="100" cy="100" r="98"/> <line x1="100" y1="10" x2="100" y2="0"/> <line x1="150" y1="13" x2="145" y2="22"/> <line x1="187" y1="50" x2="178" y2="55"/> <line x1="190" y1="100" x2="200" y2="100"/> <line x1="187" y1="150" x2="178" y2="145"/> <line x1="150" y1="187" x2="145" y2="178"/> <line x1="100" y1="190" x2="100" y2="200"/> <line x1="50" y1="187" x2="55" y2="178"/> <line x1="13" y1="150" x2="22" y2="145"/> <line x1="0" y1="100" x2="10" y2="100"/> <line x1="13" y1="50" x2="22" y2="55" /> <line x1="50" y1="13" x2="55" y2="22" /> <!--De petits traits autour du cadran--> </g> <desc>Animation des trois aiguilles ci-dessous</desc> <use xlink:href="#Heure"> <animateTransform attributeName="transform" type="rotate" dur="43200s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> <use xlink:href="#Minute"> <animateTransform attributeName="transform" type="rotate" dur="3600s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> <use xlink:href="#Seconde"> <animateTransform attributeName="transform" type="rotate" dur="60s" values="0, 100, 100; 360, 100, 100" repeatCount="indefinite" /> </use> </svg>

Commentaire

Le canevas SVG comprend trois lignes qui sont les aiguilles du chronomètre (heure, minutes et secondes).
On dessine d'abord le cadran : un cercle et des lignes courtes.

On anime les trois lignes qui font fonction d'aiguilles. Il s'agit de réaliser des rotations autour d'un axe.
Il faut donc utiliser la balise animateTransform avec le type rotate.
Une minute c'est 60s ; un heure c'est 3600s (60 * 60) et 12 heures = 43200 secondes !

Plutôt que d'utiliser les attributs from et to avec à chaque fois trois valeurs (angle,coordonnées x,y du point de rotation) on utilise ici l'attribut values avec six valeurs groupées par 3 (; entre les trois premières valeurs et les trois dernières).
Les coordonnées du point de rotation sont toujours 100,100 (le centre du canevas) et la valeur initiale de l'angle est toujours 0 et la valeur finale : 360.