Accueil

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins statiques

Dessins vectoriels avec SVG Les formes de base Les chemins - balise path Gestion du texte Insertion d'images - balise image Attribut viewBox - méthodologie Dégradés linéaires & radiaux, motifs, masques et découpes Balises defs, use, g & symbol Les transformations Les filtres en SVG

Animations SVG

La balise animate du SMIL Compléments sur la balise animate Balise animateMotion du SMIL Balise animateTransform du SMIL Balise set - avenir du SMIL Animer via JavaScript Animer via CSS 3 Deux jeux vidéos Comparaison SVG & Canvas

Le framework Snap SVG

Découverte du framework Plus loin avec Snap SVG Les filtres avec Snap SVG Les dégradés avec Snap SVG Chemins, masques & découpes & motifs & textes avec Snap SVG Animations avec Snap SVG - introduction Animations avec Snap SVG - enchainer, répéter à l'infini Animations avec Snap SVG - animations génériques - les événements Animations avec Snap SVG - progression de l'animation Animations en SVG 2 & CSS 3

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : 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

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 :

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 :

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

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 :

AnimateTransform avec type ="skewY"

Inclinaison en bas puis en haut du polygone.

Le code SVG correspondant :

Une belle horloge

Le code de ce fichier SVG (extrait)

L'attribut viewBox n'est pas vraiement nécessaire dans un fichier SVG ; l'affichage "responsive" de cette image vectorielle dans la page étant gérée par le HTML de cette dernière. Voir ci-dessous.
Le code HTML pour afficher cette image SVG dans la page : <img src ="horloge.svg" class ="centre"/>
Grâce à la classe "centre" l'image SVG est affichée avec une largeur de 50% et est centrée.

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.