Tuto SVG 07 - Transformations

Public visé: dev lambda.

Objectif

• Utiliser translate, scale, rotate et comprendre l'ordre.

Références W3C

• SVG 2 - Coordinate Systems, Transformations and Units: https://www.w3.org/TR/SVG2/coords.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120">
  <g transform="translate(20 20) rotate(10)">
    <rect x="0" y="0" width="80" height="40" fill="#f2c94c"/>
  </g>
  <rect x="140" y="20" width="60" height="60" fill="#3a6ea5" transform="scale(1.1)"/>
</svg>

tutos-svg-07-transformations.svg

À retenir

• Les transformations s'appliquent dans l'ordre d'écriture.
• rotate(angle cx cy) permet de tourner autour d'un point.
• transform sur un g affecte tous ses enfants.

Exercice

• Ajoute une rotation autour du centre du second rectangle.