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

Das <use>-Element nimmt Knoten aus dem SVG-Dokument und dupliziert sie an anderer Stelle. Der Effekt ist derselbe, als ob die Knoten tief in einen nicht freigelegten DOM geklont und dann dort eingefügt würden, wo sich das use-Element befindet, ähnlich wie geklonte Template-Elemente.

Beispiel

Das folgende Beispiel zeigt, wie das use-Element verwendet wird, um einen Kreis mit unterschiedlicher Füll- und Strichfarbe zu zeichnen. Beim letzten Kreis wird stroke="red" ignoriert, da der Strich bereits auf myCircle gesetzt war.

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

Attribute

href: Die URL zu einem Element/Fragment, das dupliziert werden muss. Siehe Verwendungshinweise für Details zu häufigen Stolperfallen.
Werttyp: <URL> ; Standardwert: keiner; Animierbar: ja
xlink:href Veraltet: Ein <IRI>-Verweis auf ein Element/Fragment, das dupliziert werden muss. Wenn sowohl href als auch xlink:href vorhanden sind, wird der Wert von href verwendet.
Werttyp: <IRI> ; Standardwert: keiner; Animierbar: ja
x: Die x-Koordinate einer zusätzlichen finalen Offset-Transformation, die auf das <use>-Element angewendet wird.
Werttyp: <coordinate> ; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen finalen Offset-Transformation, die auf das <use>-Element angewendet wird.
Werttyp: <coordinate> ; Standardwert: 0; Animierbar: ja
width: Die Breite des use-Elements.
Werttyp: <length> ; Standardwert: 0; Animierbar: ja
height: Die Höhe des use-Elements.
Werttyp: <length> ; Standardwert: 0; Animierbar: ja

Hinweis: width, und height haben keinen Effekt auf use-Elemente, es sei denn, das referenzierte Element hat ein viewBox - d.h., sie haben nur Einfluss, wenn use auf ein svg- oder symbol-Element verweist.

Hinweis: Seit SVG2 sind x, y, width, und height Geometrie-Eigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für dieses Element verwendet werden können.

Verwendungshinweise

Die meisten Attribute auf use werden ignoriert, wenn das entsprechende Attribut bereits auf dem vom use referenzierten Element definiert ist. (Dies unterscheidet sich davon, wie CSS-Stilattributen, die 'früher' in der Kaskade gesetzt wurden, Vorrang eingeräumt wird). Nur die Attribute x, y, width, height und href auf dem use-Element werden oder können eine Wirkung haben, wie später beschrieben, wenn das referenzierte Element das entsprechende Attribut bereits definiert hat. Jegliche anderen Attribute, die nicht auf dem referenzierten Element gesetzt sind, werden jedoch auf das use-Element angewendet.

Da die geklonten Knoten nicht freigelegt sind, muss beim Verwenden von CSS, um ein use-Element und seine geklonten Nachkommen zu stylen, Vorsicht geboten sein. CSS-Eigenschaften werden nicht garantiert vom geklonten DOM geerbt, es sei denn, Sie fordern dies explizit mittels CSS-Vererbung an.

Aus Sicherheitsgründen können Browser die Same-Origin-Policy auf use-Elemente anwenden und das Laden einer Cross-Origin-URL im href-Attribut verweigern. Derzeit gibt es keine definierte Methode, um eine Cross-Origin-Policy für use-Elemente festzulegen.

Warnung: Das Laden von Ressourcen mit Daten-URIs im href-Attribut ist aus Sicherheitsgründen veraltet. Dies gilt für <use href="data:... und auch beim Setzen von href mittels der set oder setAttribute-Methode. Siehe „Laden von Daten: URI“ in der Browser-Kompatibilität-Tabelle, um die Unterstützung in verschiedenen Browserversionen zu überprüfen.

Warnung: Seit SVG 2 ist das xlink:href-Attribut zugunsten von href veraltet. Weitere Informationen finden Sie auf der Seite über xlink:href.

Nutzungskontext

Kategorien	Grafikelement, Grafikreferenzierende Elemente, Strukturelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # UseElement

Browser-Kompatibilität

BCD tables only load in the browser