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>


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow