Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

<use>

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

Attributs spécifiques

Interface DOM

Cet élément est implanté par l'interface SVGUseElement.

Exemple

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://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)

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Nothus
 Dernière mise à jour par : Nothus,