Dessiner avec SVG - sommaire

SVG : les transformations

Si vous avez regardé le tuto CSS3 vous avez appris qu'il y a une nouvelle propriété CSS : transform.
Cette nouvelle propriété s'inspire de l'attribut transform du format SVG et c'est logique puisque CSS comme SVG sont deux standards du web développés par le même organisme international : le W3C.

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) les coordonnées de l'arête supérieure gauche ne sont 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 toutes les coordonnées qui sont multipliées ; il y a un changement d'échelle de la zone de dessin !
Ainsi pour le deuxième triangle le premier angle a les coordonnées 60,60 et (non pas 40,40), l'épaisseur de trait est 9 (et non pas 6),le premier côté vaut 90 (et non pas 60). Donc tout est multiplié par 1.5 !
Pour le troisième triangle le premier angle a les coordonnées 80,80 et (non pas 40,40), l'épaisseur de trait est 12 (et non pas 6), le premier côté vaut 120 (et non pas 60). Donc tout est multiplié par 2 !

Jusqu'à présent la commande scale ne comprenait qu'un seul argument. Donc le changement d'échelle était le même pour les deux axes. Mais il est possible de spécifier un changement d'échelle différent pour l'axe des X et l'axe des Y. 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 cinquième triangle de 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 dernier clone est déformé.

Le code SVG correspondant

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.
Ce qui montre que l'on peut enchaîner les transformations.

Notez que comme l'on enchaîne une translation puis un changement d'échelle le changement d'échelle ne s'applique qu'aux dimensions du modèle et non pas aux coordonnées. Ainsi le clone "ratatiné" a bien son arête supérieure gauche au point 200, 200 !
Attention si on avait enchaîné scale puis translate le résultat aurait été totalement différent ...