La 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.

Maintenant que vous connaissez l'attribut viewBox : la balise symbol remplace avantageusement les deux balises précitées.

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

Le code SVG dans cette page

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 dans la balise use.

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

Atelier

Reprenez le thème évoqué dans la page "Le clonage : balises defs et use" mais en utilisant cette fois la balise SYMBOL à la place des balises DEFS et G.

Ci-dessous le rendu : image SVG

Je vous mets sur la voie en vous donnant un extrait du code de ce fichier SVG :

... <symbol id ="maison" viewBox ="0 0 100 100"> <rect x ='60' y = '10' width = '10' height = '40' fill = 'white'/> <circle cx = '50' cy = '50' r="30" fill = 'red' /> ... <use xlink:href="#maison" width ="100" height="100" transform="translate(200,100)" /> <use xlink:href="#arbre" width ="100" height="100" transform="translate(300,100)" /> ...

Je rappelle qu'à partir du moment que les modèles ont été définis avec le conteneur SYMBOL il faut utiliser les attributs width, height dans l'instruction de clonage (balise USE).
Retour menu