Traduction
Dessiner avec SVG - sommaire
Dessiner avec SVG - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Si une animation porte sur une transformation (rotation, translation, changement d'échelle ou inclinaison) ;
Il faut alors utiliser l'élément animateTransform et préciser le type de transformation
avec l'attribut type.
Avec cet élément on retrouve sinon les mêmes attributs qu'avec la balise ANIMATE : begin, end, values/from to, dur, repeatDur, repeatCount, fill, keytimes, restart, etc.
Avant d'aborder la balise animateTransform revoyez éventuellement la page sur "les transformations" : SVG - les transformations
La valeur de l'attribut type est "translate".
Un carré se déplace le long de la diagonale jusqu'à disparaître. Ce cycle est répété à l'infini.
Extrait de la feuille de style de cette page web :
rect {fill :steelblue ; stroke-width : 10px ; }
Le code SVG :
Donc les coordonnées du coin supérieur gauche du carré passent de 0,0 à 400,400.
Les valeurs des attributs from & to sont des paires : coordonnées x,y du coin haut gauche.
Le carré se déplace le long de la diagonale mais doit rebondir lorsqu'il atteint le coin droit bas. Le retour doit être moins rapide que l'aller.
Le déplacement durant le cycle n'est pas linéaire ; 4 secondes (10s * 0.4) à l'aller et 6 secondes au retour grâce
à l'attribut keyTimes.
Observez bien la valeur de l'attribut values : trois paires de coordonnées x,y
Le fait d'animer via la balise animateTransform évite d'utiliser deux balises ANIMATE, l'une portant sur le paramètre X et une autre sur le paramètre Y.
La valeur de l'attribut type est alors "scale".
Cliquez sur le carré pour démarrer son animation.
Non seulement le carré change de taille mais en plus il se déplace sur les deux axes.
Or je ne veux qu'un changement de taille de l'objet.
Pour un objet SVG le point d'origine (par défaut) d'une transformation est l'origine du canevas qui
est en général le coin supérieur gauche du canevas.
Dans ce contexte, tout changement d'échelle s'accompagne aussi d'une translation.
Donc si vous ne voulez qu'un seul changement de taille de l'objet il faut utiliser la propriété transform-origin avec
comme valeur "center center" (ou "50% 50%") afin que l'origine de la transformation soit le centre du canevas et donc
annuler toute translation.
Remarque : pour un élément HTML, l'origine par défaut d'une transformation est le centre de cet élément.
Cliquez sur le carré pour démarrer son animation.
Cette fois l'effet de translation est annulé ; le centre du carré reste bien dans le centre du canevas.
Le code est strictement identique à la version précédente sauf pour l'instruction rectqui devient :
J'ai donc rajouté à l'objet rect la propriété transform-origin: 50% 50%.
Le code :
Observez bien les quatres valeurs du viewBox.
Le repère fait bien 400 de large sur 400 de haut (deux dernières valeurs du viewBox) mais les valeurs mini sont -200 et -200
sur les deux axes. Donc l'origine du canevas est désormais son centre.
La propriété transform-origin devient alors inutile puisque l'origine de la transformation est désormais le centre du canevas.
La valeur de l'attribut type est alors "rotate".
Un chronomètre et une trotteuse.
line {stroke:black; stroke-linecap:round; }
#secondes{stroke-width:6px;}
#chrono{stroke-width:3px ;}
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 pour les attributs from et to : la première valeur indique l'angle (de 0 à 360).
Par contre les coordonnées du point de rotation ne changent pas : 200,150 (coordonnées du centre du canevas).
Il y a deux aiguilles. Le "chrono" fait un tour complet en 1 seconde et la trotteuse fait un tour complet en 60 secondes.
Une belle application de animatetransformn basée sur le type "rotate".
Ce document SVG est inséré dans cette page web via l'élément IMG car le fichier .svg ne contient que du CSS et du SVG.
Notez que l'origine du canevas est son coin supérieur gauche (et non pas son centre) or les rotations doivent avoir pour origine le centre du canevas ...
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 à partir du centre
du canevas d'où la propriété : "transform-origin : 50% 50%;".
Une minute c'est 60s ; un heure c'est 3600s (60 * 60) et 12 heures = 43200 secondes !
Observez les valeurs des attributs from & to de chaque balise animateTransform liée à un élément line.
Comme l'origine de la rotation est déjà le centre du canevas, je n'ai plus à préciser que la valeur du rayon.
Cette horloge est très jolie mais il y a un problème ... Elle n'affiche pas l'heure exacte.
Afficher l'heure exacte uniquement via SVG est impossible. En effet SVG est dépourvu de fonctions qui retournent
les composantes de l'instant présent.
Rassurez-vous il y a une solution, il suffit de rajouter dans le document SVG un script.
Chapitre qui contient la version définitive de cette application SVG
Il faut utiliser l'attribut additive avec la valeur "sum".
Ci-dessous un clic sur le carré provoque sa rotation et son changement de taille.
Notez la propriété transform-origin: 50% 50%;" dans la balise rect.
Remarquez l'attribut additive="sum" dans chaque élément animateTransform.
Seriez-vous capable de donner un effet 3D à cette animation (ombrage du carré) ?
Seriez-vous capable d'imaginer une autre solution en jouant sur les quatre valeurs du viewBox ?
Boxy SVG est capable de générer ce genre de code SVG.