transform

html,
body,
svg {
  height: 100%;
}

<svg
  viewBox="-40 0 150 100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g
    fill="grey"
    transform="rotate(-10 50 100)
                translate(-36 45.5)
                skewX(40)
                scale(1 0.5)">
    <path
      id="heart"
      d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
  </g>

  <use xlink:href="#heart" fill="none" stroke="red" />
</svg>

En tant qu'attribut de présentation, transform peut être utilisé par n'importe quel élément (en SVG 1.1, seuls les 16 éléments suivants pouvaient l'utiliser : <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text> et <use>).

Pour des raisons historiques liées à SVG 1.1, <linearGradient> et <radialGradient> prennent en charge l'attribut gradientTransform et <pattern> permet d'utiliser patternTransform. Ces deux attributs sont exactement synonymes de l'attribut transform.

Les fonctions de transformation suivantes peuvent être utilisées par l'attribut transform.

La fonction de transformation matrix(<a> <b> <c> <d> <e> <f>) permet d'appliquer une transformation géométrique décrite par 6 coefficients et matrix(a,b,c,d,e,f) sera équivalent à la matrice de transformation mathématique : $$\begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix}$$Le calcul des coordonnées s'obtient de la façon suivante : $$\begin{pmatrix} x*{\mathrm{newCoordSys}} \ y*{\mathrm{newCoordSys}} \ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x*{\mathrm{prevCoordSys}} \ y*{\mathrm{prevCoordSys}} \ 1 \end{pmatrix} = \begin{pmatrix} a x*{\mathrm{prevCoordSys}} + c y*{\mathrm{prevCoordSys}} + e \ b x*{\mathrm{prevCoordSys}} + d y*{\mathrm{prevCoordSys}} + f \ 1 \end{pmatrix}$$

Exemples

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="30" height="20" fill="green" />

  <!--
  Dans l'exemple suivant, on applique la matrice suivante:
  [a c e]    [3 -1 30]
  [b d f] => [1  3 40]
  [0 0 1]    [0  0  1]

  qui transforme le rectangle de cette façon:

  top left corner: oldX=10 oldY=10
  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80

  top right corner: oldX=40 oldY=10
  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110

  bottom left corner: oldX=10 oldY=30
  newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
  newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140

  bottom right corner: oldX=40 oldY=30
  newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
  newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
  -->
  <rect
    x="10"
    y="10"
    width="30"
    height="20"
    fill="red"
    transform="matrix(3 1 -1 3 30 40)" />
</svg>

La fonction de transformation translate(<x> [<y>]) permet de déplacer un objet de x sur l'axe horizontal et de y sur l'axe vertical (i.e. xnew = xold + <x>, ynew = yold + <y>). Si y n'est pas fourni, la valeur par défaut est 0.

Exemples

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Pas de translation -->
  <rect x="5" y="5" width="40" height="40" fill="green" />

  <!-- Translation horizontale -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="blue"
    transform="translate(50)" />

  <!-- Translation verticale -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="red"
    transform="translate(0 50)" />

  <!-- Translation horizontale et verticale -->
  <rect
    x="5"
    y="5"
    width="40"
    height="40"
    fill="yellow"
    transform="translate(50,50)" />
</svg>

La fonction de transformation scale(<x> [<y>]) définit une homothétie d'un facteur x en horizontal et d'un facteur y en vertical. Si la valeur y n'est pas fournie, on considère qu'elle est égale à x.

Exemples

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- uniform scale -->
  <circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />

  <!-- vertical scale -->
  <circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1,4)" />

  <!-- horizontal scale -->
  <circle cx="0" cy="0" r="10" fill="pink" transform="scale(4,1)" />

  <!-- No scale -->
  <circle cx="0" cy="0" r="10" fill="black" />
</svg>

La fonction de transformation rotate(<a> [<x> <y>]) définit une rotation de a degrés autour d'un point de coordonnées x et y. Si les paramètres optionnels x et y ne sont pas fournis, la rotation est effectuée autour de l'origine dans le système de coordonnés actuel.

Exemples

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="10" height="10" />

  <!-- rotation is done around the point 0,0 -->
  <rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />

  <!-- rotation is done around the point 10,10 -->
  <rect
    x="0"
    y="0"
    width="10"
    height="10"
    fill="green"
    transform="rotate(100,10,10)" />
</svg>

La fonction de transformation skewX(<a>) définit une distorsion horizontale de a degrés.

Exemples

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>

La fonction de transformation skewY(<a>) définit une distorsion verticale de a degrés.

Exemples

html,
body,
svg {
  height: 100%;
}

<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect x="-3" y="-3" width="6" height="6" />

  <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>