Élément <defs> SVG

L'élément <defs> de SVG est utilisé pour embedder des définitions réutilisables dans l'image SVG. Par exemple, vous pouvez regrouper des formes SVG et les utiliser comme une seule forme répétée.

Exemple de <defs>

Ceci est un exemple simple de l'élément <defs> :

<svg>
　　　　<defs>
　　　　　　　　<g>
　　　　　　　　　　　　<rect x="100"y="100"width="100"height="100"　/>
　　　　　　　　　　　　<circle cx="100"cy="100"r="100"　/>
　　　　　　　　</g>
　　　　</defs>
</svg>

Les formes définies dans l'élément <defs> ne s'affichent pas dans l'image SVG. Avant de les afficher, elles doivent être référencées par un élément <use>. Voici un exemple :

<svg width="500"height="100">
　　　　<defs>
　　　　　　　　<g id="shape">
　　　　　　　　　　　　<rect x="0" y="0" width="50"height="50"></rect>
　　　　　　　　　　　　<circle cx="0" cy="0" r="50"></circle>
　　　　　　　　</g>
　　　　</defs>
　　　　<use xlink:href="#shape" x="50"y="50"></use>
　　　　<use xlink:href="#shape" x="200"y="50"></use>
　　　　<circle cx="50"cy="50"r="5"style="fill:#0000ff;"/circle>
　　　　<circle cx="200"cy="50"r="5"style="fill:#0000ff;"/circle>
</svg>

Avant de pouvoir faire référence à l'élément <g>, il doit être configuré avec un ID via son attribut id. L'élément <use> fait référence à l'élément <g> via son attribut xlink:href. Notez que le # précède l'ID dans la valeur de l'attribut.

L'élément <use> spécifie où afficher la forme réutilisée via ses attributs x et y. Notez que les formes à l'intérieur de l'élément <g> sont situées à 0,0. Cela est dû au fait que leur position a été ajoutée à la position spécifiée par l'élément <use>.

Effet d'image après exécution :

Le point bleu n'est pas dans l'exemple. Il a été ajouté pour afficher les x et y des deux éléments <use>.

Quels éléments peut-on définir dans l'élément <defs> ?

Vous pouvez insérer les éléments suivants dans l'élément <defs> :

• Tous les éléments de forme (rect, line, etc.)

• g

• symbol