Matrice de transformation – exemples de code SVG

Une matrice de transformation SVG exprime translation, mise à l’échelle, rotation et inclinaison sous une seule forme matrix(a,b,c,d,e,f). Elle est utile lorsque plusieurs transformations doivent être combinées, calculées ou exportées depuis un outil graphique. Pour des opérations simples, les fonctions séparées de Transformations SVG sont généralement plus lisibles.

Dans cet article, vous apprendrez à :

• Lire les six valeurs de matrix(a,b,c,d,e,f).
• Utiliser la matrice pour translation, scale, rotation et skew.
• Mettre à l’échelle ou faire pivoter autour d’un pivot choisi.
• Éviter les erreurs liées à l’origine, à l’ordre et aux valeurs de skew.
• Choisir entre fonctions transform lisibles et matrice calculée.

Bases de la matrice de transformation

La matrice SVG est une matrice 3 × 3, mais la syntaxe SVG n’écrit que les six premières valeurs :

Paramètre	Usage typique	Symbole SVG
a	Échelle X ou cosinus de rotation	sx / cos(α)
b	Skew Y ou sinus de rotation	tan(α) / sin(α)
c	Skew X ou sinus négatif	tan(α) / -sin(α)
d	Échelle Y ou cosinus de rotation	sy / cos(α)
e	Translation X	tx
f	Translation Y	ty

transform="matrix(a,b,c,d,e,f)"

Comment utiliser une matrice de transformation SVG

1. Commencez par l’identité matrix(1 0 0 1 0 0).
2. Modifiez e et f pour translater de tx et ty.
3. Modifiez a et d pour mettre à l’échelle selon x et y.
4. Utilisez sinus et cosinus dans a, b, c, d pour la rotation.
5. Utilisez b ou c pour le skew selon l’axe.
6. Ajustez e et f pour un pivot différent de (0,0).

Matrice de translation

matrix(1,0,0,1,tx,ty) déplace l’objet de tx sur x et ty sur y.

Matrice de mise à l’échelle

matrix(sx,0,0,sy,0,0) agrandit ou réduit l’objet. Si sx et sy sont différents, l’objet est étiré. La mise à l’échelle se fait par rapport à l’origine, ce qui peut aussi déplacer visuellement l’objet.

Pour mettre à l’échelle autour de (cx, cy), la matrice compensée est :

matrix(sx,0,0,sy,cx·(1-sx),cy·(1-sy))

Matrice de rotation

La matrice de rotation utilise sinus et cosinus :

matrix(cos(α),sin(α),-sin(α),cos(α),0,0)

La rotation autour d’un pivot (cx, cy) nécessite une compensation dans e et f :

matrix(cos(α), sin(α), -sin(α), cos(α), cx·(1-cos(α))+cy·sin(α), cy·(1-cos(α))-cx·sin(α))

Matrice de skew

Le skew incline un axe du système de coordonnées.

matrix(1,0,tan(α),1,0,0) – skew selon l’axe x.

matrix(1,tan(α),0,1,0,0) – skew selon l’axe y.

Erreurs courantes et corrections

Problème	Cause	Correction
L’objet se déplace	Transformation relative à (0,0)	Compensez avec e et f ou changez de pivot
Rotation autour du mauvais point	Matrice sans compensation	Combinez translation, rotation et translation inverse
Mise à l’échelle déplace l’objet	Origine non prise en compte	Ajustez e et f
Aucun effet visible	Matrice identité ou valeurs erronées	Vérifiez que les valeurs diffèrent de 1 0 0 1 0 0
Skew inattendu	Mauvais b ou c	Vérifiez l’axe de skew souhaité

Recettes rapides

Objectif	Matrice	Note
Identité	matrix(1 0 0 1 0 0)	Aucun changement
Translation	matrix(1 0 0 1 tx ty)	Déplace sans rotation
Scale uniforme	matrix(s 0 0 s 0 0)	Par rapport à l’origine
Scale non uniforme	matrix(sx 0 0 sy 0 0)	Étire l’objet
Rotation	matrix(cosθ sinθ -sinθ cosθ 0 0)	θ en radians
Skew X	matrix(1 0 tanθ 1 0 0)	Incline selon x
Skew Y	matrix(1 tanθ 0 1 0 0)	Incline selon y

FAQ – matrice de transformation SVG

Que signifie matrix(a,b,c,d,e,f) en SVG ?

C’est une fonction transform qui stocke échelle, skew, rotation et translation dans six valeurs. e et f déplacent l’élément.

Qu'est-ce que la matrice identité ?

matrix(1 0 0 1 0 0) laisse l’élément inchangé.

Pourquoi ma matrice déplace-t-elle l'objet ?

Parce que scale et rotation s’appliquent par rapport à l’origine du système courant, sauf compensation dans e et f.

Faut-il utiliser matrix() ou des fonctions séparées ?

Utilisez translate(), scale() et rotate() pour la lisibilité; utilisez matrix() pour valeurs calculées ou transformations combinées.

Spécification et ressources associées

• La section transformations définit matrix() et la syntaxe transform.
• Transformations SVG donne les fonctions séparées.
• Systèmes de coordonnées et unités SVG explique le système utilisé par les calculs.
• Transformer des éléments SVG en Python montre la mise à jour de transform avec Aspose.SVG for Python via .NET.