SVG
Transformation
Recherche…
Remarques
Les éléments graphiques peuvent être modifiés en ajoutant un attribut de transformation .
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>
Au lieu que l'origine supérieure gauche soit rendue aux coordonnées (0, 0), elle sera affichée en bas et à droite du point (10, 10).
Des groupes entiers d'éléments peuvent être transformés ensemble et les transformations peuvent s'ajouter.
<svg xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(45)">
<rect x="0" y="0" width="30" height="30" />
<circle cx="5" cy="5" r="5" transform="scale(3)" />
</g>
</svg>
Tout d'abord, chaque point du cercle sera mis à l'échelle avec le facteur 3 par rapport à l'origine, en ramenant le centre du cercle au milieu du rectangle à (15, 15) et son rayon à 15. Ensuite, le rectangle et le le cercle sera tourné de 45 degrés dans le sens des aiguilles d'une montre autour de l'origine.
Traduire
Déplacez un rectangle de 10 unités vers la droite et de 20 unités vers le bas:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>
Déplacez-le 0 unités horizontalement et 20 unités en haut:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>
Déplacez-le 10 unités vers la gauche et 0 unités verticalement:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>
échelle
Mettez à l'échelle un rectangle horizontalement de facteur 2 et verticalement de facteur 0,5:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>
Le résultat est équivalent à
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="5" width="80" height="20" />
</svg>
Miroir un rectangle horizontalement:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>
L’échelle fonctionne par rapport à l’origine, ce qui équivaut à
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="0" width="20" height="40" />
</svg>
tourner
Faire pivoter un polygone dans le sens des aiguilles d'une montre de 90 degrés autour de l'origine:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>
Le résultat est équivalent à
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,30 -20,15" />
</svg>
Le centre de rotation peut être donné explicitement:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>
Le résultat est équivalent à
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="30,0 30,30 10,15" />
</svg>
skewX, skewY
incliner un polygone horizontalement de 45 degrés:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
Le résultat est équivalent à
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
Les valeurs de x sont calculées en tant que x + y * tan(angle) , les valeurs y restent inchangées
incliner un polygone verticalement de 30 degrés:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
Le résultat est équivalent à (permettant d’arrondir)
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
Les valeurs de x restent inchangées, les valeurs de y sont calculées comme y + x * tan(angle)
matrice
Appliquez une matrice de transformation à un polygone:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>
Chaque point (x, y) sera transformé en appliquant la matrice (a, b, c, d, e, f) comme ceci:
┌ x_new ┐ ┌ a c e ┐ * ┌ x_old ┐ ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ = └ b d f ┘ │ y_old │ = └ x_old * b + y_old * d + f ┘
└ 1 ┘
Le résultat est équivalent à
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="40,10 70,28 34,58 4,40" />
</svg>
Transformations multiples
Les transformations peuvent être concaténées et appliquées de droite à gauche
Faites pivoter un rectangle de 90 degrés, puis déplacez-le de 20 unités et vers la droite de 20 unités:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="-10" y="-20" width="20" height="40"
transform="translate(20 20) rotate(90)" />
</svg>
Le résultat est équivalent à
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="10" width="40" height="20" />
</svg>
