<use>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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 si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément use tel que le permet les éléments de gabarit grâce à HTML5.

Puisque les noeuds clonés par use ne sont pas exposés, vous devez être attentif lorsque vous utilisez 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 pas correctement 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 href.

Attention : Depuis la version de SVG 2, l'attribut xlink:href est obsolète. Voir la page xlink:href pour plus d'informations.

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

html
<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" href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" href="#Port" class="classA" />
  <text y="55">blue</text>
  <use x="50" y="50" href="#Port" style="fill: blue;" />
</svg>

Spécifications

Specification
Scalable Vector Graphics (SVG) 2
# UseElement

Compatibilité des navigateurs

BCD tables only load in the browser