<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 in einem nicht sichtbaren DOM tief geklont und dann dort eingefügt würden, wo das use-Element ist, ähnlich wie geklonte Template-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, 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 Verwendungsnotizen für Details zu häufigen Fallstricken.
Wertetyp: <URL> ; Standardwert: keiner; Animierbar: ja
xlink:href Veraltet: Ein <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.
Wertetyp: <IRI> ; Standardwert: keiner; Animierbar: ja
x: Die x-Koordinate einer zusätzlichen endgültigen Versatztransformation, die auf das <use>-Element angewendet wird.
Wertetyp: <coordinate> ; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen endgültigen Versatztransformation, 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 keine Wirkung auf use-Elemente, es sei denn, das referenzierte Element hat ein viewBox - d.h. sie haben nur eine Wirkung, wenn use sich auf ein svg- oder symbol-Element bezieht.

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.

Verwendungsnotizen

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 früher in der Kaskade überschrieben wurden). Nur die Attribute x, y, width, height und href auf dem use-Element werden oder können eine Wirkung haben, die später beschrieben wird, 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 werden.

Da die geklonten Knoten nicht sichtbar sind, muss mit Sorgfalt vorgegangen werden, wenn CSS verwendet wird, um ein use-Element und seine geklonten Nachkommen zu stylen. CSS-Eigenschaften sind nicht garantiert, von dem geklonten DOM geerbt zu werden, es sei denn, Sie verlangen dies ausdrücklich mit CSS-Vererbung.

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 keine definierte Möglichkeit, 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 set oder setAttribute-Methode. Siehe "Laden von 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 xlink:href-Seite.

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