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>. Cette assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :
<g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g>
Ce code a pour résultat de dessiner 2 rectangles rouges.
Toutes les transformations suivantes sont résumées dans l'attribut transform 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 fonction translate() est parfaite.
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
Cet exemple a pour résultat un rectangle, qui est translaté du point (0,0) au point (30,40). Si la deuxième valeur de translate() 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 fonction rotate(). La valeur de la rotation doit être définie en degrés.
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
Cet exemple montre un carré pivoté de 45°.
Déformation
Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions skewX() et skewY(). 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, celle des X et 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
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 transformation matrix(A1, A2, B1, B2, C1, C2). Pour plus de renseignement, 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 translatée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.
<g transform="scale(2)"> <rect width="50" height="50" /> </g>
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 que userSpaceOnUse et du même genre.
Embarquer du SVG dans SVG
Par opposition au HTML, le SVG peut embarquer d'autres éléments SVG 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 utilisant viewBox, width et height de l'élément SVG.
<svg xmlns="https://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.
Interwiki Languages Links