Dessiner avec SVG - sommaire

SVG : les transformations

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

Transformation : fonction translate

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

Pour les quatre carrés la valeur des attributs x et y est 0 et pourtant (sauf pour le premier) la position du coin haut gauche du rectangle n'est pas 0,0 ...
En effet grâce à l'attribut transform avec la fonction translate(x,y) on réalise un changement d'origine.

Transformation : fonction scale

Les triangles gris, "navy" et olive sont croissants avec respect des proportions. Ce qui n'est pas le cas des triangles de contour marron et jaune.

Le code CSS et SVG correspondant

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

Les cinq triangles ont les mêmes paramètres pour l'attribut points et pourtant ils sont décalés et ont une taille croissante ...
En effet avec la fonction scale c'est pas seulement la taille du polygone qui est changée mais aussi les coordonnées de position qui sont changées : le triangle ne démarre plus à 40,40 mais à cette position multipliée par 1.5 puis 2, ...

La fonction scale peut comprendre un argument (changement d'échelle identique pour les deux axes) ou deux. C'est ce que j'ai fait pour les deux derniers triangles.
Ainsi le quatrième triangle a le même largeur et la même abcisse que le troisième puisque le facteur X est le même (2).
Les paramètres de scale peuvent être des nombres décimaux et peuvent être inférieurs à 1. C'est le cas du dernier triangle (contour jaune).

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 skew

Grâce à cette fonction vous pouvez transformer des rectangles en parallélogrammes.

skewX : inclinaison à gauche ou à droite

Le code SVG correspondant : <svg width="100%" viewBox ="0 0 900 150" > <rect x="0" y="0" width="200" height="50" fill ="black"/> <rect x="100" y="60" width="200" height="50" fill ="red" transform = "skewX(15)"/> <rect x="600" y="60" width="200" height="50" fill ="green" transform = "skewX(-15)"/> </svg>

skewY : inclinaison en bas ou en haut

Le code SVG correspondant : ... <rect x="0" y="0" width="200" height="50" fill ="black"/> <rect x="100" y="100" width="200" height="50" fill ="red" transform = "skewY(15)"/> <rect x="300" y="200" width="200" height="50" fill ="green" transform = "skewY(-15)"/> ...

Transformations de clones : balise use avec attribut transform

Le modèle est "cloné" quatre fois mais avec des tailles et des positionnements différents.

Le code

Commentaire du code

Ici on utilise la balise use mais avec une syntaxe différente. Au lieu des attributs x et y on trouve l'attribut transform avec les fonctions translate et scale.

Attention les deux dernières instructions use xlink:href sont à priori identiques et pourtant les deux copies ne se recouvrent pas ...
Avant dernière instruction : translation puis mise à l'échelle sur l'axe X donc le coin haut gauche du clone est à 100,100.
Dernière instruction : mise à l'échelle sur X puis translation ; donc le coin haut gauche du dernier clone est à 200,100