SVG : les transformations

Une transformation a un type : translate, rotate, scale .
En d'autres termes il s'agit d'une translation ou d'une rotation ou d'une mise à l'échelle.

Transformation : fonction translate

La commande translate provoque un changement d'origine dans le canevas.

Quatre carrés remplis de rouge à demi opaque et décalés de 50px par rapport au précédent.

Le code CSS et SVG correspondant

	<style>
	.rose {fill : rgba(255,0,0,0.5) ; }
...
<svg width="50%" viewBox ="0 0 400 400">
	<rect x="0" y="0" width="100" height="100" class ="rose" />
	<rect x="0" y="0" width="100" height="100" class ="rose" transform = "translate(50,50)"/>
	<rect x="0" y="0" width="100" height="100" class ="rose" transform = "translate(100,100)"/>
	<rect x="0" y="0" width="100" height="100" class ="rose" transform = "translate(150,150)"/>
</svg>
...

Les quatre rectangles ont les mêmes valeurs pour les attributs X & Y et pourtant leur coin haut gauche ne coïncident pas ; à cause du changement d'origine provoqué par la translation.

Transformation : fonction rotate

Le code CSS et SVG correspondant

...
<style>
		line{ stroke-width:6px;stroke-linecap:round;  } 
...
<svg width="50%" viewBox ="0 0 400 400">
	<line  x1="200" y1="150" x2="200" y2="50" stroke = 'aqua'/> 
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(45,200,150)" stroke = 'black'/> 
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(90,200,150)" stroke = 'olive'/> 
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(135,200,150)" stroke = 'purple'/> 
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(180,200,150)" stroke = 'orange' />
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(225,200,150)" stroke = 'navy'/> 
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(270,200,150)" stroke = 'lime'/> 
	<line  x1="200" y1="150" x2="200" y2="50" transform ="rotate(315,200,150)" stroke = 'pink'/> 
...

Grâce à l'attribut transform avec la valeur rotate(angle,x,y) on réalise une rotation de la ligne.
Les valeurs x et y sont identiques pour tous les traits et c'est normal car ce sont les coordonnées du centre de rotation qui doit toujours correspondre au centre de la zone de dessin

Transformation : fonction scale

Exemple

Le code CSS & SVG correspondant

...
<style>
	rect{stroke-width:3px; fill : none ;} 
...
<svg width="50%" viewBox ="0 0 500 500">
	<rect x="200" y="200" width ="100" height ="100" stroke ='yellow' /> 
	<rect x="200" y="200" width ="100" height ="100" stroke ='green' transform="scale(0.5)"/> 
	<rect x="200" y="200" width ="100" height ="100" stroke ='olive'  transform="scale(2)"/> 
</svg>

Grâce à l'attribut transform avec la fonction scale(valeur) on réalise un changement d'échelle.

Les carrés ont des tailles différentes, ce qui est logique puisqu'on demande un changement d'échelle.
Par contre ils ont les mêmes attributs X et Y et pourtant ils sont décalés sur ces deux axes (en haut à gauche si réduction et en bas à droite si agrandissement).

La fonction scale agrandit ou réduit un élément à partir de l’origine du système de coordonnées (le coin haut gauche) par défaut. Donc par défaut, le changement d'échelle se traduit également par une translation sur les axes.

La solution

L’agrandissement doit se faire symétriquement autour du centre de l’élément.

Le code

...
	<rect x="200" y="200" width ="100" height ="100" stroke ='yellow' /> 
	<rect x="200" y="200" width ="100" height ="100" stroke ='green' transform="scale(0.5)" transform-origin ="50% 50%"/> 
	<rect x="200" y="200" width ="100" height ="100" stroke ='olive'  transform="scale(2)" transform-origin ="50% 50%"/>

Il faut rajouter l'attribut transform-origin ="50% 50%" afin que l'origine du changement d'échelle devienne le centre de l'élément.

Le rendu

Cette fois les changement d'échelle partent bien du centre de l'élément.

Clonage avec transformation

Le code

<svg width="60%" viewBox ="0 0 800 400" >
	<defs>
		<g id = 'modele'>
			<ellipse fill='red'  cx="15" cy="15" rx="30" ry="15" />
			<circle  fill = 'yellow'  cx="15" cy="15" r = '10' />
		</g> 
	</defs>
	<use href="#modele"  id ="clone1"/>
	<use href="#modele" transform ='translate(100,100) scale(2)' id ="clone2" />
	<use href="#modele" transform ='scale(2) translate(100,100)' id ="clone3" />
</svg>

Le modèle est "cloné" trois fois.
Les deux derniers clonages semblent identiques.

Le rendu

Remarque

Ici on utilise la balise use (clonage d'un modèle) mais avec une syntaxe différente ; au lieu des attributs x et y on trouve l'attribut transform.
Attention les deux dernières instructions sont à priori identiques et pourtant les objets "clone2" & "clone3" ne se recouvrent pas. L'ordre des types de transformation a donc son importance ...

Traduction

Dessiner avec SVG - sommaire

Coder en SVG

Dessins vectoriels statiques

Dessins vectoriels animés

Le framework Snap SVG

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

SVG : les transformations

Transformation : fonction translate

Le code CSS et SVG correspondant

Transformation : fonction rotate

Le code CSS et SVG correspondant

Transformation : fonction scale

Exemple

Le code CSS & SVG correspondant

La solution

Le code

Le rendu

Clonage avec transformation

Le code

Le rendu

Remarque