Chapitre 6 Systèmes de coordonnées et transformations

Extrait 

Transformations élémentaires

Nous avons vu comment déplacer un élément <use> en utilisant ses attributs 'x' et 'y' et comment choisir un repère pour un groupe. 

Mais si nous voulons faire tourner, changer les dimensions d'un élément? 
Pour cette tâche, les spécifications SVG fournissent un attribut très puissant -  transform. 
Cet attribut peut être appliqué à la grande majorité des éléments graphiques. Il peut être également appliqué à l'élément <g>.

Voici sa syntaxe:

   transform    =   "translate(tx [ ty])
                	rotate(angle [cx cy])
                	scale(sx [sy])
                	skewX(angle)
                	skewY(angle)"

Nous allons discuter les valeurs possibles de cet attribut séparèment. Nous allons illustrer les transformations avec un objet un peu plus complexe, 
un élément <use> faisant référence à un groupe. Mais n'oublions pas que l'attribut 'transform' s'applique aussi aux autres objets graphiques.
Nous allons utiliser cette vis en définissant sa géométrie dans son système local de coordonnées représenté en orange sur la figure.

Figure 6-13. La vis et son système de coordonnées

( vioir cette image comme svg )

Voici le code pour notre vis:

  <defs>
    <linearGradient  id="zylinderShade" x2="0%" y2="50%" spreadMethod="reflect">
      <stop offset="0%" stop-color="darkslategray"/>
      <stop offset="100%" stop-color="white"/>
    </linearGradient>
    <g id="vis" stroke="black" stroke-linejoin="round" >
      <path fill="url(#zylinderShade)" d="M100,64 96,60 96,140 100,136z M68,64 72,60 72,140 68,64z M96,60 72,60 72,140 96,140z"/>
      <path fill="url(#zylinderShade)" d="M100,84 220,84 220,116 100,116z M220,84 220,116 224,112 224,88 220,84z" />
      <path stroke-width="0.4" fill="none" stroke-linecap="round" stroke-dasharray="24 12 4 12" d="M60,100 232,100" />
      <path stroke-width="0.4" fill="none" stroke-linecap="round" d="M100,88 224,88 M100,112 224,112" />
    </g>
  </defs>

Si nous référençons la vis avec  <use xlink:href="#vis" /> 

le système local de coordonnées de l'instance de la vis (orange) coïncide avec le système de référence (bleu). 
Nous allons analyser les effets des valeurs de l'attribut 'transform'. 
Avec ce modèle, il devient clair que nous transformons en fait le système de coordonnées et non de simples objets graphiques.