Transformations de base
=======================

* « Précédent
* Suivant »

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


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

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.


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

Rotation
--------

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


```html
<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()` et `rotate()` sont couramment utilisées ensemble:


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

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



{

x

new

C
o
o
r
d
S
y
s

=
a

x

prev
C
o
o
r
d
S
y
s

+
c

y

prev

C
o
o
r
d
S
y
s

+
e


y

new

C
o
o
r
d
S
y
s

=
b

x

prev

C
o
o
r
d
S
y
s

+
d

y

prev
C
o
o
r
d
S
y
s

+
f

\left{ \begin{matrix} x\*{\mathrm{prevCoordSys}} = a x\*{\mathrm{newCoordSys}} + c y\*{\mathrm{newCoordSys}} + e \ y\*{\mathrm{prevCoordSys}} = b x\*{\mathrm{newCoordSys}} + d y\*{\mathrm{newCoordSys}} + f \end{matrix} \right.


Voici un exemple 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.


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

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


```html
<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 »