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

* Some parts of this feature may have varying levels of support.

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

Beispiel

Das folgende Beispiel zeigt, wie das use-Element verwendet wird, um einen Kreis mit einer anderen Füll- und Strichfarbe zu zeichnen. Im letzten Kreis wird stroke="red" ignoriert, weil stroke bereits auf myCircle gesetzt wurde.

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 Hinweise zur Verwendung für Details zu häufigen Stolpersteinen.
Wertetyp: <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.
Wertetyp: <IRI> ; Standardwert: keiner; Animierbar: ja
x: Die x-Koordinate einer zusätzlichen finalen Offset-Transformation, die auf das <use>-Element angewendet wird.
Wertetyp: <coordinate> ; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen finalen Offset-Transformation, die auf das <use>-Element angewendet wird.
Wertetyp: <coordinate> ; Standardwert: 0; Animierbar: ja
width: Die Breite des use-Elements.
Wertetyp: <length> ; Standardwert: 0; Animierbar: ja
height: Die Höhe des use-Elements.
Wertetyp: <length> ; Standardwert: 0; Animierbar: ja

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

Hinweis: Ab 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.

Hinweise zur Verwendung

Die meisten Attribute auf use werden ignoriert, wenn das entsprechende Attribut bereits auf dem von use referenzierten Element definiert ist. (Dies unterscheidet sich davon, wie CSS-Stilattribute die 'früher' im Cascade gesetzten überschreiben). 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. Allerdings werden alle anderen Attribute, die nicht auf dem referenzierten Element gesetzt sind, auf das use-Element angewendet.

Da die geklonten Knoten nicht freigelegt sind, muss beim Verwenden von CSS zur Stilgestaltung eines use-Elements und seiner geklonten Nachfahren Vorsicht walten lassen. CSS-Eigenschaften werden vom geklonten DOM nicht automatisch geerbt, es sei denn, Sie fordern ihre Vererbung ausdrücklich durch CSS-Vererbung an.

Aus Sicherheitsgründen können Browser die Same-Origin-Policy auf use-Elemente anwenden und sich weigern, eine Cross-Origin-URL im href-Attribut zu laden. Derzeit gibt es keine definierte Möglichkeit, eine Cross-Origin-Policy für use-Elemente festzulegen.

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

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

Verwendungskontext

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