<symbol>
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément SVG <symbol> est utilisé pour définir des objets graphiques modèles pouvant être instanciés par un élément SVG <use>.
L'utilisation d'éléments <symbol> pour des graphiques réutilisés plusieurs fois dans un même document ajoute de la structure et de la sémantique. Des documents riches en structure peuvent être rendus graphiquement, sous forme parlée ou en braille, et favorisent ainsi l'accessibilité.
Note :
Un élément <symbol> n'est pas destiné à être rendu lui-même. Seules les instances d'un élément <symbol> (c.-à-d. une référence à un <symbol> par un élément <use>) sont rendues. Cela signifie que certains navigateurs peuvent refuser d'afficher directement un élément <symbol> même si la propriété CSS display indique le contraire.
Contexte d'utilisation
| Catégories | Élément conteneur, Élément structurel |
|---|---|
| Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre : Éléments d'animation Éléments descriptifs Éléments de formes Éléments structurels Éléments de dégradés <a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> |
Attributs
height-
Cet attribut détermine la hauteur du symbole. Type de valeur : <length>|<percentage> ; Valeur par défaut :
auto; Animation : oui preserveAspectRatio-
Cet attribut définit comment le fragment svg doit être déformé s'il est inclus dans un conteneur ayant un ratio d'affichage (largeur:hauteur) différent. Type de valeur : (
none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)? ; Valeur par défaut :xMidYMid meet; Animation : oui refX-
Cet attribut détermine la coordonnée x du point de référence du symbole. Type de valeur : <length>|<percentage>|
left|center|right; Valeur par défaut :0; Animation : oui refY-
Cet attribut détermine la coordonnée y du point de référence du symbole. Type de valeur : <length>|<percentage>|
top|center|bottom; Valeur par défaut :0; Animation : oui viewBox-
Cet attribut définit les limites de la zone d'affichage du symbole. Type de valeur : <list-of-numbers> ; Valeur par défaut : aucune; Animation : oui
width-
Cet attribut définit la largeur du symbole. Type de valeur : <length>|<percentage> ; Valeur par défaut :
auto; Animation : oui x-
Cet attribut détermine la coordonnée x du symbole. Type de valeur : <length>|<percentage> ; Valeur par défaut :
0; Animation : oui y-
Cet attribut détermine la coordonnée y du symbole. Type de valeur : <length>|<percentage> ; Valeur par défaut :
0; Animation : oui
Interface DOM
Cet élément implémente l'interface SVGSymbolElement.
Exemple
<svg
viewBox="0 0 80 20"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Notre symbol a son propre système de coordonnées -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- Une grille pour matérialiser le positionnement du symbole -->
<path
d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none"
stroke="pink" />
<!-- Multiples instances de notre symbole -->
<use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" />
<use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" />
<use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" />
<use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" />
<use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>
Spécifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # SymbolElement |