Définir des modèles pour les cloner
Cloner des modèles
Dans la page précédente nous avons vu comment grouper des formes simples en un objet parfaitement identifié.
Dans cette page nous allons voir comment dupliquer (cloner) un groupe de formes identifié via la balise g.
Observez attentivement le canevas ci-dessus.
Vous avez quatre maisons et quatre arbres qui sont strictement identiques.
Première partie du code SVG : définition de modèles
<![CDATA[
<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>
]]>
Les balises G sont à l'intérieur du conteneur defs.
Donc les deux objets identifiés maison et arbre ne sont pas ici dessinés mais simplement définis.
On parle de modèle.
Le modèle identifié maison comprend 5 formes de base :
- la cheminée(rectangle blanc)
- le toit (cercle rouge) masqué en partie par les murs
- les murs (rectangle blanc masquant la moitié du cercle rouge)
- la fenêtre (rectangle noir)
- la porte (rectangle noir)
Le modèle identifié arbre comprend deux formes de base :
- un rectangle (le tronc)
- un cercle qui cache en partie le tronc
Deuxième partie du code SVG : le clonage
<![CDATA[
<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 un objet identifié (forme ou groupe de formes).
Notez bien les attributs de la balise use :
- xlink:href avec comme valeur l'identifiant de l'objet cloné
- les attributs x et y : position du clone (copie) dans le canevas
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().
Définition en cascade de modèles
On peut définir un nouveau modèle à partir d'un modèle de base.
Un canevas avec utilisation de 4 modèles
Il y a trois désormais clonage de 4 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 :
<![CDATA[
<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) :
<![CDATA[
<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" />
...
]]>
Prolongements
Plus loin dans ce tuto je vous montrerai que la définition de modèles peut être réalisée plus simplement avec la balise symbol
Retour menu