L'élement <use>
permet la duplication de nodes (noeuds du DOM, NDR) définis par <defs> afin de les insérer par ailleurs. L'effet est le même que certains noeuds était discrétement dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé use tel que le permet les éléments de gabarit grâce à HTML5.
Tant que les noeuds clonés par use
ne sont pas insérés au sein du DOM tel que prévu, vous devez être attentif lorsque vous utilisé des règles de style CSS sur l'élément use et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez correctement pas les héritages CSS.
Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de même-origine (c'est-à-dire le couple domaine et port identiques) pour l'élément use
ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut xlink:href
.
Contexte d'usage
Catégories | Élément graphique, Elément en rapport avec les graphismes, Élément structurel |
---|---|
Contenu autorisé | Tout élément de cette liste, quel qu'en soit l'ordre: Éléments d'animation Éléments descriptifs |
Attributs
Attributs globaux
- Conditional processing attributes »
- Core attributes »
- Graphical event attributes »
- Presentation attributes »
- Xlink attributes »
class
style
externalResourcesRequired
transform
Attributs spécifiques
Interface DOM
Cet élément est implanté par l'interface SVGUseElement
.
Exemple
<svg width="80" height="80" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"> <style> .classA { fill: red; } </style> <defs> <g id="Port"> <circle style="fill: inherit;" r="10"/> </g> </defs> <text y="15">black</text> <use x="50" y="10" xlink:href="#Port" /> <text y="35">red</text> <use x="50" y="30" xlink:href="#Port" class="classA"/> <text y="55">blue</text> <use x="50" y="50" xlink:href="#Port" style="fill: blue;"/> </svg>
Spécifications
Spécification | Statut | Commentaire |
---|---|---|
Scalable Vector Graphics (SVG) 2 La définition de '<use>' dans cette spécification. |
Candidat au statut de recommandation | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) La définition de '<use>' dans cette spécification. |
Recommendation | Initial definition |
Compatibilité avec les navigateurs
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | (Oui) | (Oui) | (Oui) |
Load from external URI | (Oui) | (Oui) | Pas de support | (Oui) | (Oui) |
Load from data: URI | ? | 10.0 (10.0) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Oui) | (Oui) | ? | (Oui) | (Oui) |
Load from external URI | (Oui) | (Oui) | ? | (Oui) | (Oui) |
Load from data: URI | (Oui) | (Oui) | ? | (Oui) | (Oui) |