Élément <use> SVG

L'élément <use> SVG peut réutiliser des formes SVG situées à d'autres emplacements dans le document SVG (y compris les éléments <g> et <symbol>), y compris les formes définies à l'intérieur ou à l'extérieur de l'élément <defs> (rendant la forme invisible jusqu'à ce qu'elle soit utilisée).

Exemple de use

Voici un exemple simple de l'élément <use> :

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

Cet exemple montre l'élément <g> défini dans l'élément <defs>. Cela rend l'élément <g> invisible, sauf s'il est référencé par un élément <use>.

Avant de faire référence à l'élément <g>, vous devez le configurer via son attribut ID. L'élément <use> le fait via l'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. Veuillez noter 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 l'exécution :

Le point bleu n'est pas une partie de l'exemple. Il a été ajouté pour montrer les coordonnées x et y des deux éléments <use>.

Utilisation de la forme en dehors de l'élément <defs>

L'élément <use> peut réutiliser n'importe quel élément de position dans l'image SVG, tant que la forme a une valeur d'ID unique. Voici un exemple :

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

Dans cet exemple, un élément <g> contenant un élément <rect> est défini. Ensuite, il réutilise l'élément <g> (y compris l'élément <rect> imbriqué) via l'élément <use>.

Effet d'image après l'exécution :

Veuillez noter que la forme originale et sa version réutilisée sont affichées simultanément. Cela se produit parce que la forme à réutiliser n'a pas été définie à l'intérieur de l'élément <defs> ou de l'élément <symbol> (élément <g>). C'est pourquoi elle est visible.

De même, le point bleu indique les coordonnées de l'élément <use>.

Configurer le CSS

Si le CSS n'a pas été configuré sur la forme originale, vous pouvez configurer le CSS lors de la réutilisation de la forme. Vous devez simplement spécifier les styles à définir dans l'attribut style de l'élément <use>. Voici un exemple :

<svg width="500" height="110">
　　<g id="shape3">
　　　　　　<rect x="0" y="0" width="50" height="50"　/>
　　</g>
　　<use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/>
　　<use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/>
</svg>

Attention, la forme originale n'a pas de propriété style définie. Ensuite, il utilisera le style par défaut (généralement noir) pour le rendu.