Accueil
Mes tutoriels sur la programmation

Dessiner avec SVG - sommaire


Vous pouvez me contacter via Facebook (questions, critiques constructives) : page Facebook relative à mon site

Modèle et clonage de modèle

Dans ce chapitre nous abordons le clonage. Le clonage n'est pas une simple copie d'une forme ou d'un groupe de formes tenant lieu de modèle.
En effet si le modèle est modifié, les clones le sont aussi.

Définir un modèle et dupliquer ce modèle

Pour créer un groupe de formes il faut utiliser le conteneur G.
Pour définir un modèle (une forme ou groupe de formes) il faut utiliser le conteneur defs.

Premier exemple

image SVG

Observez attentivement l'image vectorielle insérée ci-dessus dans la page.
On observe quatre maisons et quatre arbres qui sont strictement identiques.

Première partie du code SVG : définition de modèles

<svg height = '200' width = '400' style ='background : lime' > <defs> <g id="maison"> <rect x ='60' y = '10' width = '10' height = '40' fill = 'white'/> <circle cx = '50' cy = '50' r="30" fill = 'red' /> <rect x = '20' y = '50' height ='30' width = '60' fill = 'white' /> <rect x = '30' y = '60' height ='10' width = '10' fill = 'black' /> <rect x = '50' y = '60' height ='20' width = '10' fill = 'black' /> </g> <g id = 'arbre'> <rect x ='45' y ='60' width = '10' height = '30' fill = 'marroon' /> <circle cx = '50' cy = '40' r = '35' fill = 'green' /> </g> </defs>

Observez très attentivement le code ci-dessus !
Nous avons cinq formes de base (4 rectangles et un cercle) qui sont à l'intérieur du conteneur G. Ce conteneur G à l'attribut ID. Nous avons créé un premier groupe de formes qui est identifié "maison".
Nous avons ensuite deux formes regroupées dans un groupe identifié "arbre".
Ces deux groupes de formes sont à l'intérieur du conteneur DEFS (comme DEFinitionS). Donc ces groupes de formes ne sont pas dessinés ! Ce sont des modèles !.

Deuxième partie du code SVG : le clonage

<use xlink:href="#maison" x="0" y="0" /> <use xlink:href="#arbre" x="100" y="0" /> <use xlink:href="#maison" x="200" y="0" /> <use xlink:href="#arbre" x="300" y="0" /> <use xlink:href="#maison" x="0" y="100" /> <use xlink:href="#arbre" x="100" y="100" /> <use xlink:href="#maison" transform="translate(200,100)"; <use xlink:href="#arbre" transform="translate(300,100)"; </svg>

Pour dessiner effectivement les maisons et les arbres il suffit de dupliquer (cloner) les modèles préalablement définis.
La balise USE permet de cloner (dupliquer) un modèle.

Pour les deux derniers clonages je n'ai pas utilisé les attributs x et y mais à la place j'effectue une translation via l'attribut transform argumenté avec la commande translate().

Exemple 2 : définition en cascade de modèles

On peut définir un nouveau modèle à partir d'un modèle de base.

Un canevas SVG avec utilisation de 4 modèles

image SVG

Par rapport au fichier SVG précédent j'ai ajouté dans la partie defs le code suivant :

<g id ="oranger"> <use xlink:href="#arbre" x="0" y="0" /> <circle cx = '30' cy = '30' r = '5' fill = 'orange' /> <circle cx = '70' cy = '30' r = '5' fill = 'orange' /> <circle cx = '35' cy = '50' r = '5' fill = 'orange' /> <circle cx = '65' cy = '50' r = '5' fill = 'orange' /> </g> <g id ="citronier"> <use xlink:href="#arbre" x="0" y="0" /> <circle cx = '30' cy = '30' r = '5' fill = 'yellow' /> <circle cx = '70' cy = '30' r = '5' fill = 'yellow' /> <circle cx = '35' cy = '50' r = '5' fill = 'yellow' /> <circle cx = '65' cy = '50' r = '5' fill = 'yellow' /> </g>

Les modèles oranger et citronier sont basés sur le modèle arbre.

Donc au niveau de la partie clonage il suffit d'écrire (extraits du code) :

<use xlink:href="#maison" x="0" y="0" /> <use xlink:href="#arbre" x="100" y="0" /> ... <use xlink:href="#oranger" x="300" y="0" /> ... <use xlink:href="#citronier" x="300" y="100" /> ...

SVG : balise symbol

Pour créer un modèle (sans le dessiner) composé d'un groupe de formes basiques on a utilisé la balise G à l'intérieur du conteneur defs mais il y a une autre solution plus simple.

Sachez que la balise symbol remplace avantageusement les deux balises précitées.

Exemple

Ci-dessous une image de 800 par 600 avec un modèle "homme" et un modèle "femme"

Le code SVG correspondant

Définition des modèles

<svg viewBox ="0 0 800 600" width ="100%" height ="100%"> <symbol id ="homme" viewbox ="0 0 100 100"> <circle cx ="50" cy ="20" r ="10" /> <polyline points ="30,30 50,40 70,30" /> <ellipse cx="50" cy ="50" rx ="5" ry="20" /> <polyline points ="40,90 50,70 60,90" /> </symbol> <symbol id ="femme" viewbox ="0 0 100 100"> <circle cx ="50" cy ="20" r ="10" /> <polyline points ="30,30 50,40 70,30" /> <polygon points ="50,30 60,70 40,70" /> <polyline points ="40,90 50,70 60,90" /> </symbol>

Pour chaque modèle on crée une zone de dessin de 100 par 100 avec l'attribut viewbox.
Les coordonnées des formes constitutives du modèle sont donc désormais indépendantes du canevas SVG mais liées au viewBox associé à la balise symbol.
L'homme et la femme sont identiques sauf que chez la femme l'ellipse (tronc) est remplacée par un polygone (triangle symbolisant une robe).

Clonage des modèles

<use xlink:href ="#homme" width ="100" height="100" x="0" y="0" /> <use xlink:href ="#femme" width ="100" height="100" x="200" y="0" /> <use xlink:href ="#homme" width ="100" height="100" x="400" y="0" /> <use xlink:href ="#femme" width ="100" height="100" x="600" y="0"/> <use xlink:href ="#homme" width ="100" height="100" x ="0" y ="200" transform="skewX(30)"/> <use xlink:href ="#femme" width ="100" height="100" x ="200" y ="200" transform="skewY(30)"/> <use xlink:href ="#homme" width ="100" height="100" x ="200" y ="200" transform="scale(1.5)"/> <use xlink:href ="#femme" width ="100" height="100" x ="200" y ="200" transform="scale(0.5)"/> ...

Attention, si les modèles ont été définis via la balise symbol il faut impérativement utiliser les attributs width et height pour le clonage avec la balise use.

Naturellement il est toujours possible de cloner le modèle avec des transformations (attribut transform).