Transformations SVG

Les transformations SVG créent des formes dans l'image SVG. Par exemple, déplacer, agrandir et faire pivoter les formes. C'est un moyen pratique pour afficher du texte vertical ou en diagonale.

Exemple de transformation

Voici un exemple simple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="50"　y="50"　height="110"　width="110"
　　　　　　　　　　style="stroke:#ff0000;　fill:　#ccccff"　transform="translate(30)　rotate(45　50　50)"
　　　　　　　　　　　　>
　　　　</rect>
　　　　<text　x="70"　y="100"　transform="translate(30)　rotate(45　50　50)"
　　　　>oldtoolbag.com</text>
</svg>

Effet d'image après l'exécution :

Notez<rect>élémenttransform et <text>detransformPropriété. Cette propriété spécifie la transformation à appliquer à la forme. Dans cet exemple, une translation et une rotation sont appliquées. Les deux seront expliquées plus en détail dans cet article.

Quels éléments peuvent être transformés ?

Vous pouvez appliquer la transformation à toutes les formes SVG. Vous pouvez également appliquer la transformation à<g> 　 　éléments, permettant de transformer efficacement l'ensemble de l'élément en une seule fois. Il est également possible de transformer les dégradés et les motifs de remplissage.

Fonctions de transformation

SVG fournit quatre fonctions de transformation :

• translate()

• rotate()

• scale()

• skew()

• matrix()

Les sections suivantes expliquent en détail chaque une de ces fonctions.

En réalité, les fonctions de transformation ne transforment pas automatiquement les formes SVG, mais transforment le repère de base de la forme. Par conséquent, même si la largeur est affichée en multiple, la largeur20 multiplié par2La forme conserve logiquement2La largeur de 0.

Déplacer

translate()Fonction de déplacement de la forme. Vous allezx et y　 Valeur transmise àtranslate()Fonction. Voici un exemple :

translate(50,25)

Dans cet exemple, la forme est déplacée le long de l'axe x50 unités, et en déplaçant le long de l'axe y25unités.

Voici un exemple qui montre deux formes de même position et de même taille, avec et sans translation :

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#cc3333"/>
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#3333cc"　transform="translate(75,25)"></rect>
</svg>

Effet d'image après l'exécution :

Veuillez noter que, par rapport à la première forme (rouge), la deuxième forme (bleue) est déplacée le long de l'axe x75unités, en déplaçant le long de l'axe y25unités.

Rotation

rotate()Fonction de rotation autour du point 0,0. Voici un exemple qui montre un rectangle (contour) et une rotation15Rectangle égal après rotation (rempli) :

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　　></rect>
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15)"
　　　　　　　　></rect>
　　　　</svg>

Effet d'image après l'exécution :

Pour effectuer une rotation autour de points autres que 0,0, il faut transmettre les coordonnées x et y de ce point àtransformLes fonctions. Voici un exemple d'un rectangle non tourné (contour) et d'un rectangle égal (solide) tourné autour de son centre.15degrés :

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　></rect>
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15,　40,　40)"
　　　　　　　></rect>
</svg>

Effet d'image après l'exécution :

Tous les rotations sont dans le sens des aiguilles d'une montre, avec un angle allant de 0 à360. Si vous souhaitez tourner dans le sens contraire des aiguilles d'une montre, passez un angle négatif àrotate()Les fonctions.

Agrandissement

scale()Les fonctions peuvent agrandir ou réduire proportionnellement la forme.scale()Les fonctions peuvent agrandir ou réduire la taille de la forme et ses coordonnées de position. Par conséquent, avec20 multiplié par2de proportion20 et une hauteur de3Un rectangle de 0 (bleu) est situé20,20 à40 et une hauteur de60.

scale()Les fonctions peuvent également agrandir ou réduire la largeur des traits de la forme.

C'est un exemple qui montre un rectangle situé10,0 à20 et une hauteur de2Un rectangle de 0 (bleu), ainsi qu'un rectangle proportionnel (noir) avec un rapport d'augmentation2：

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc; fill:none;"></rect>
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke: #000000; fill:none;"　transform="scale(2)"></rect>
</svg>

Effet d'image après l'exécution :

Veuillez noter la position et la taille du rectangle comment il est agrandi ou réduit.

Vous pouvez agrandir ou réduire la forme sur l'axe x et y avec d'autres facteurs. Pour cela, vous pouvez ajouterscale()Les fonctions fournissent x-scale et y-Les paramètres de scale, comme suit :

scale(2,3);

Dans cet exemple, la forme est augmentée ou réduite le long de l'axe x2fois, en augmentant ou en diminuant la forme le long de l'axe y3fois. Voici un exemple :

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc; fill:none;"></rect>
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke: #000000; fill:none;"　transform="scale(2,3)"></rect>
</svg>

Effet d'image après l'exécution :

Veuillez noter que la largeur de trait du rectangle agrandi (noir) est également agrandie, et les proportions d'agrandissement sur les axes x et y sont différentes.

Transformer en fonction miroir

scale()en augmentant ou en diminuant la forme le long de l'axe x ou y-1proportion 　 　Cette fonction peut être utilisée comme fonction miroir. Après avoir terminé, vous devez d'abord déplacer cette forme dans la direction x ou y (translation), sinon la forme miroir apparaîtra en dehors du canevas SVG.

Voici un exemple :

<svg　width="500"　height="150">
<path d="M20,20 l20,20 l0,20 l-20,20 Z"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<path d="M20,20 l20,20 l0,20 l-20,20 Z"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(100, 0) scale(-1,　1) "　/></svg>

C'est à x = 10L'image du résultat de la ligne dessinée à 0 (parce que le rectangle s'est déplacé dans la direction x100).

Le bleu est la forme originale. La forme noire est la forme de proportion de déplacement et d'augmentation.

Décalage

skewX()etskewY()Les fonctions de décalage de l'axe x et y. En réalité, ces fonctions inclinent l'axe donné selon un angle spécifié en degrés.

Voici quelques exemples de rectangles avec desskewX()Voici quelques exemples de rectangles avec des valeurs.

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(10)"　/>
<rect　x="100"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(45)"　/>
<rect　x="150"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(60)"　/></svg>

Effet d'image après l'exécution :

Comme vous le voyez,skewX()La fonction rend une ligne verticale sembler tourner d'un angle donné. Par conséquent,skewY()La fonction rend une ligne horizontale sembler tourner d'un angle donné. Voici quelques exemples :

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(60)"　/>
<rect　x="100"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(45)"　/>
<rect　x="150"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(10)"　/></svg>

Matrice

peuvent également être représentées sous forme de matrice. La matrice est la suivante :

a　　c　　e
b　　d　　f
0　　0　　1

parce que seules les premières6de valeurs, par conséquent, seules les fonctions de transformation matricielle peuvent être fournies6de valeurs. Voici un exemple :

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

D'autres fonctions de transformation peuvent être représentées sous forme de matrice. Voici quelques exemples :

Déplacer
1　　0　　tx
0　　1　　ty
0　　0　　　1
matrix(1,0,0,1,tx,ty)

Tourner
cos(a)　　　-sin(a)　　0
sin(a)　　　　cos(a)　　0
　　　　　0　　　　　　　　0　　　1
matrix(　cos(a),　sin(a),-sin(a),cos(a),0,0　)

Remarque : cette valeurcos(a)etsin(a)doit être calculé préalablement avant l'insertion du matrice. Ce paramètreaest l'angle de rotation.

Echelle
sx　　0　　0
　0　sy　　0
　0　　0　　1
matrix(sx,0,0,sy,0,0)

La transformation de décalage le long de l'axe x peut être écrite comme :

Décalage
1　　tan(a)　　0
0　　　　　　　1　　0
0　　　　　　　0　　1
matrix(1,0,tan(a),1,0,0)

tan(a)Les valeurs doivent être inséréesmatrix()Les fonctions doivent être calculées préalablement avant leur insertion.

La transformation de décalage le long de l'axe y peut être représentée comme :

Décalage
1　　　　　　　0　　0
tan(a)　　1　　0
0　　　　　　　0　　1
matrix(1,tan(a),0,1,0,0)

Ceci est un exemple de transformation matricielle SVG simulant une fonction de transformation simple :

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#cc3333"/>
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="matrix(1,0,0,1,100,20)"
　　　　　　　　/>
</svg>

Effet d'image après l'exécution :

Veuillez noter comment le rectangle de droite (bleu) est transformé par rapport au rectangle de gauche (rouge).

combiner les transformations

Les transformations peuvent être combinées. Vous pouvez le faire entransformPlusieurs fonctions de transformation peuvent être placées dans l'attribut pour en réaliser.

Ceci est un exemple où la transformation consiste d'abord à translater (déplacer) puis à tourner un rectangle. Cet exemple montre le rectangle avant et après l'application de toute transformation (noir) (bleu).

<svg　width="500"　height="150">
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(50,0)　rotate(30)"　/>
</svg>

Effet d'image après l'exécution :

L'ordre des transformations est important

L'ordre des transformations est important. DanstransformL'ordre des fonctions de transformation spécifiées dans l'attribut est l'ordre dans lequel elles sont appliquées à la forme.

Les exemples suivants montrent la différence entre d'abord translater puis tourner, et d'abord tourner puis translater la forme :

<svg　width="500"　height="150">
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　stroke-width:　2px;　fill:none;"
　　　　　　　　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　stroke-width:　2px;　　fill:none;"
　　　　　　transform="translate(100,0)　rotate(45)"　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#cc3333;　stroke-width:　2px;　　fill:none;"
　　　　　　transform="rotate(45)　translate(100,0)"　/>
</svg>

Effet d'image après l'exécution :

Un rectangle noir n'applique aucune transformation. D'abord, déplacez le rectangle bleu, puis faites-le tourner. D'abord, faites tourner le rectangle rouge, puis déplacez-le.