Transformations de base

<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'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.

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.

<svg width="40" height="50" style="background-color:#bff;">
  <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 de translate() n'est pas définie, elle sera pas défaut assignée à 0.

Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction rotate().

<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.

Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, translate() et rotate() sont couramment utilisées ensemble:

<svg width="40" height="50" style="background-color:#bff;">
  <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.

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é.

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.

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(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 un exemple concret sur la documentation de transformation SVG. Pour plus de renseignements, veuillez vous référer à la page de recommandation SVG.

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 que userSpaceOnUse.

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="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.

• Précédent
• Suivant