Transformer SVG avec translate, scale, rotate et skew

Les transformations SVG changent l’affichage des éléments graphiques sans réécrire leur géométrie. Utilisez transform pour déplacer, redimensionner, faire pivoter ou incliner des formes avec translate(), scale(), rotate(), skewX() et skewY(). Pour la forme matricielle, consultez Matrice de transformation.

Dans cet article, vous apprendrez à :

Déplacer des éléments SVG avec translate().
Redimensionner des éléments SVG avec scale().
Faire pivoter autour de l’origine ou d’un point choisi.
Incliner avec skewX() et skewY().
Comprendre pourquoi l’ordre des transformations compte.

Comment transformer des éléments SVG

Choisissez l’élément SVG ou le groupe à transformer.
Ajoutez transform à cet élément ou à un groupe <g> parent.
Utilisez translate(tx, ty) pour déplacer.
Utilisez scale(sx, sy), rotate(angle cx cy), skewX(angle) ou skewY(angle) pour modifier la géométrie visible.
Chaînez plusieurs fonctions seulement si l’effet combiné est nécessaire.
Utilisez matrix(a,b,c,d,e,f) lorsque des valeurs calculées sont plus adaptées.

Translation SVG avec `translate()`

translate(tx, ty) déplace chaque point d’un élément de tx sur l’axe x et ty sur l’axe y. Si ty est omis, il vaut 0.

x(new) = x(old) + tx
y(new) = y(old) + ty

1<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
2    <g fill="none">
3        <circle cx="15" cy="15" r="10" stroke="blue" />
4        <circle cx="15" cy="15" r="10" stroke="black" transform="translate(22)" />
5        <circle cx="15" cy="15" r="10" stroke="red" transform="translate(44)" />
6        <circle cx="15" cy="15" r="10" stroke="green" transform="translate(33,13)" />
7        <circle cx="15" cy="15" r="10" stroke="yellow" transform="translate(11,13)" />
8	</g>
9</svg>

Cinq anneaux olympiques comme illustration d’une transformation de translation

Mise à l’échelle SVG avec `scale()`

scale(sx, sy) multiplie la largeur par sx et la hauteur par sy. Si sy est omis, SVG utilise sx pour les deux axes.

Quatre cercles colorés illustrant la mise à l’échelle

scale(1,4) étire verticalement; scale(4,1) étire horizontalement. La mise à l’échelle se fait par rapport à l’origine du système de coordonnées.

Rotation SVG avec `rotate()`

rotate(angle, cx, cy) fait pivoter un élément de angle degrés autour de (cx, cy). Sans centre, la rotation se fait autour de (0,0).

Note : rotate(angle cx) est invalide. Si vous fournissez un centre, indiquez cx et cy.

Cinq rectangles remplis illustrant la rotation SVG autour d’un point et autour de l’origine

Inclinaison SVG avec `skewX()` et `skewY()`

skewX(angle) incline selon l’axe x; skewY(angle) incline selon l’axe y. Les angles sont exprimés en degrés. Avec skewX(), les coordonnées x changent et y reste inchangé; avec skewY(), c’est l’inverse.

Cercle et rectangle avant et après application de skewX et skewY

Erreurs courantes et corrections

Problème	Cause	Correction
L’élément ne bouge pas	`transform` mal écrit ou sans guillemets	Vérifiez `transform="translate(150,50)"`
Direction de rotation inattendue	Signe de l’angle mal interprété	Positif = horaire, négatif = antihoraire
Rotation autour du mauvais point	`cx` / `cy` omis	Donnez un centre explicite
Inclinaison excessive	Angle fourni en radians	Utilisez des degrés
Élément disparu après scale	Facteur `0` ou négatif	Utilisez des valeurs positives non nulles
Combinaison incorrecte	Ordre inversé	Les transformations sont appliquées de droite à gauche

FAQ – transformations SVG

Que fait l'attribut transform en SVG ?

Il applique une transformation géométrique à un élément ou groupe. Il change l’affichage sans modifier x, y, cx, cy ou d.

Quelle est la différence entre translate et scale ?

translate(tx, ty) déplace sans changer la taille. scale(sx, sy) change la taille et peut déplacer visuellement l’objet car l’origine sert de référence.

Comment faire pivoter SVG autour d'un point central ?

Utilisez rotate(angle cx cy), par exemple transform="rotate(45 100 100)".

Quand utiliser matrix plutôt que les fonctions transform ?

Utilisez les fonctions séparées pour la lisibilité. Utilisez matrix() pour des valeurs calculées, exportées ou combinées.

Spécification et ressources associées

La section transformations définit transform et ses fonctions.
Matrice de transformation explique translation, scale, rotation et skew sous forme matricielle.
SVG viewBox sert quand il faut changer la zone visible plutôt que transformer un élément.
Transformations SVG – exemples C# et Transformer des éléments SVG en Python montrent les workflows API.

Texte SVG Matrice de transformation SVG