<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 anderer Stelle. Der Effekt ist derselbe, als ob die Knoten tief in ein nicht-offen gelegtes DOM geklont und dann eingefügt würden, wo das use-Element ist, ähnlich wie geklonte Template-Elemente.

Beispiel

Das folgende Beispiel zeigt, wie Sie das use-Element verwenden, um einen Kreis mit einer anderen Füll- und Strichfarbe zu zeichnen. Im letzten Kreis wird stroke="red" ignoriert, da der Strich 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 Benutzungshinweise für Details zu häufigen Fallstricken.
Werttyp: <URL>; Standardwert: keiner; Animierbar: ja
xlink:href Veraltet: Eine <IRI>-Referenz zu einem 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 endgültigen Offset-Transformation, die auf das <use>-Element angewendet wird.
Werttyp: <coordinate>; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen endgültigen 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 keine Wirkung auf use-Elemente, es sei denn, das referenzierte Element hat ein viewBox - d.h. sie haben nur dann eine Wirkung, wenn use auf ein svg- oder symbol-Element verweist.

Hinweis: Ab SVG2 sind x, y, width und height Geometrieeigenschaften, was bedeutet, dass diese Attribute auch als CSS-Eigenschaften für das 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 solche, die 'früher' in der Kaskade gesetzt wurden, überschreiben). Nur die Attribute x, y, width, height und href auf dem use-Element werden möglicherweise oder wahrscheinlich eine Wirkung haben, die später beschrieben wird, wenn das referenzierte Element bereits das entsprechende Attribut definiert hat. Jedoch werden alle anderen Attribute, die nicht auf dem referenzierten Element gesetzt sind, auf das use-Element angewendet werden.

Da die geklonten Knoten nicht offen gelegt werden, muss beim Verwenden von CSS zur Gestaltung eines use-Elements und seiner geklonten Nachfahren Vorsicht geboten sein. CSS-Eigenschaften werden nicht garantiert von dem geklonten DOM übernommen, es sei denn, Sie fordern dies explizit über CSS inheritance an.

Aus Sicherheitsgründen können Browser die Same-Origin-Policy auf use-Elemente anwenden und können sich weigern, eine Cross-Origin-URL im href-Attribut zu laden. Derzeit gibt es keinen definierten Weg, 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, wenn href durch die Methoden set oder setAttribute gesetzt wird. Siehe "Laden von data: 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 xlink:href.

Verwendungszusammenhang

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