La balise animateTransform

La balise animate ne s'applique pas aux transformations comme 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 "les transformations" dans le tutoriel "dessiner avec SVG".

AnimateTransform avec type ="scale"

Le code CSS et SVG correspondant

... <style> polygon{ stroke-width:6px; fill : none ; stroke-linejoin : round ; } ... <svg ... <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 du code

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 containeur polygon contient la balise animateTransform.

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 ... <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" ...

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 ... <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 ... <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>
Retour Menu