SVG
Transformation

Syntaxe

• transform = " [fonctions] * "
• traduire (x [, y])
• tourner (θ [, x, y])
• échelle (x [, y])
• skewX (θ)
• skewY (θ)
• matrice (a, b, c, d, e, f)

Application de transformations

Les transformations peuvent être appliquées aux éléments en ajoutant un attribut de transform :

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

Ou à des groupes d'éléments entourés de balises <g> :

<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>

Plus de transformations peuvent être appliquées au même élément en les ajoutant séparées par des espaces:

<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>

Fonctions de transformation

Traduire

translate déplace les graphiques le long de vecteurs spécifiés:

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

La première valeur est la traduction x et la seconde la y. Si le y est omis, il sera par défaut à 0.

Échelle

scale redimensionne les éléments selon des ratios spécifiés:

<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>

Comme translate , les arguments sont x, puis y. Cependant, à l' scale , si le y est omis, la valeur par défaut sera x; en d'autres termes, il redimensionne l'élément sans modifier le rapport d'aspect.

Tourner

rotate pivoter les éléments selon des angles spécifiés.

<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>

La première valeur est l'angle, en degrés. La transformation est appliquée dans le sens des aiguilles d'une montre. Les deux autres valeurs représentent le point à faire pivoter, par défaut à l'origine.