SVG : balises G, DEFS & USE
Cette leçon est très importante. Vous allez découvrir quelques outils du langage SVG qui permettent de simplifier sensiblement le code.
La balise USE permet de cloner un modèle. Attention un clonage n'est pas une copie simple. Le clone est lié à l'original ;
si ce dernier change les clones sont modifiés aussi.
Premier exemple
Observez attentivement l'image vectorielle insérée dans la page.
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>
]]>
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 éléments SVG sont contenus dans le conteneur DEFS (comme DEFinitionS). Donc ces éléments ne sont pas dessinés ! Ce sont des modèles !.
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 (dupliquer) un modèle.
Notez bien les attributs de la balise use :
- xlink:href avec comme valeur l'identifiant de l'élément (forme de base ou groupe de formes)
- les attributs x & y (position de la copie 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 :
<![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