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
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
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
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.
- Notez bien les attributs de la balise use :
- xlink:href avec comme valeur l'identifiant du modèle
- les attributs x & y (position du clone dans le canevas) ou transform
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
- Il y a trois désormais quatre modèles :
- un modèle de maison
- un arbre sans fruits
- un arbre avec 4 oranges (boules de couleur orange)
- un arbre avec 4 citrons (boules de couleur jaune)
Par rapport au fichier SVG précédent j'ai ajouté dans la partie defs le code suivant :
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) :
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
- Le code comprend deux parties :
- la définition des modèles avec la balise symbol
- le clonage des modèles
Définition des modèles
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
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).