Accueil

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

SVG : les transformations

Une transformation a un type : translate, rotate, scale .
En d'autres termes il s'agit d'une translation ou d'une rotation ou d'une mise à l'échelle.

Transformation : fonction translate

La commande translate provoque un changement d'origine dans le canevas.

Quatre carrés remplis de rouge à demi opaque et décalés de 50px par rapport au précédent.

Le code CSS et SVG correspondant

Les quatre rectangles ont les mêmes valeurs pour les attributs X & Y et pourtant leur coin haut gauche ne coïncident pas ; à cause du changement d'origine provoqué par la translation.

Transformation : fonction rotate

Le code CSS et SVG correspondant

Grâce à l'attribut transform avec la valeur rotate(angle,x,y) on réalise une rotation de la ligne.
Les valeurs x et y sont identiques pour tous les traits et c'est normal car ce sont les coordonnées du centre de rotation qui doit toujours correspondre au centre de la zone de dessin

Transformation : fonction scale

Exemple

Le code CSS & SVG correspondant

Grâce à l'attribut transform avec la fonction scale(valeur) on réalise un changement d'échelle.

Les carrés ont des tailles différentes, ce qui est logique puisqu'on demande un changement d'échelle.
Par contre ils ont les mêmes attributs X et Y et pourtant ils sont décalés sur ces deux axes (en haut à gauche si réduction et en bas à droite si agrandissement).

La fonction scale agrandit ou réduit un élément à partir de l’origine du système de coordonnées (le coin haut gauche) par défaut. Donc par défaut, le changement d'échelle se traduit également par une translation sur les axes.

La solution

L’agrandissement doit se faire symétriquement autour du centre de l’élément.

Le code

Il faut rajouter l'attribut transform-origin ="50% 50%" afin que l'origine du changement d'échelle devienne le centre de l'élément.

Le rendu

Cette fois les changement d'échelle partent bien du centre de l'élément.

Clonage avec transformation

Le code

Le modèle est "cloné" trois fois.
Les deux derniers clonages semblent identiques.

Le rendu

Remarque

Ici on utilise la balise use (clonage d'un modèle) mais avec une syntaxe différente ; au lieu des attributs x et y on trouve l'attribut transform.
Attention les deux dernières instructions sont à priori identiques et pourtant les objets "clone2" & "clone3" ne se recouvrent pas. L'ordre des types de transformation a donc son importance ...