Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Transformations de base
Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément<g>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :
Exemple
<svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g></svg>Toutes les transformations suivantes sont résumées dans l'attributtransform de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.
Translation
Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonctiontranslate() est parfaite.
<svg width="40" height="50"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /></svg>Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).
Si la deuxième valeur detranslate() n'est pas définie, elle sera pas défaut assignée à 0.
Rotation
Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonctionrotate().
<svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /></svg>Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.
Transformations multiples
Les transformations peuvent être concaténées, séparées par des espaces. Par exemple,translate() etrotate() sont couramment utilisées ensemble:
<svg width="40" height="50"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /></svg>Cet exemple montre un carré déplacé et pivoté de 45 degrés.
Déformation
Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctionsskewX() etskewY(). Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.
Agrandissement et réduction
scale() modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule.Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.
Transformations complexes avec matrice
Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformationmatrix(a, b, c, d, e, f) qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par
Voici unexemple concret sur la documentation de transformation SVG. Pour plus de renseignements, veuillez vous référer àla page de recommandation SVG.
Effets sur les systèmes de coordonnées
Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.
<svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g></svg>Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels queuserSpaceOnUse.
Embarquer du SVG dans SVG
Par opposition au HTML, le SVG peut embarquer d'autres élémentssvg déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisantviewBox,width etheight de l'élémentsvg.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg width="100" height="100" viewBox="0 0 50 50"> <rect width="50" height="50" /> </svg></svg>Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.