<use>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

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

Das <use>-Element nimmt Knoten aus einem SVG-Dokument und dupliziert sie an anderer Stelle. Der Effekt ist derselbe, als wären die Knoten tief in ein nicht sichtbares DOM geklont und dann dort eingefügt worden, wo sich das <use>-Element befindet, ähnlich wie geklonte <template>-Elemente.

Verwendungskontext

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

Attribute

href: Die URL zu einem Element/Fragment, das dupliziert werden muss. Siehe Verwendungsnotizen für Details zu häufigen Fallstricken.
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

Warnung: Seit SVG 2 ist das Attribut xlink:href zugunsten von href veraltet. Weitere Informationen finden Sie auf der Seite xlink:href.
x: Die x-Koordinate einer zusätzlichen letzten Offset-Transformation, die auf das <use>-Element angewendet wird.
Werttyp: <coordinate>; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen letzten 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 Auswirkung auf <use>-Elemente, es sei denn, das referenzierte Element hat eine viewBox - d.h. sie haben nur eine Wirkung, 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.

DOM-Schnittstelle

Dieses Element implementiert die SVGUseElement-Schnittstelle.

Beispiel

Das folgende Beispiel zeigt, wie man das <use>-Element verwendet, um einen Kreis mit unterschiedlicher Füll- und Strichfarbe zu zeichnen. Im letzten Kreis wird stroke="red" ignoriert, weil 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>

Verwendungsnotizen

Die meisten Attribute auf <use> werden ignoriert, wenn das entsprechende Attribut bereits auf dem vom <use> referenzierten Element definiert ist. (Dies unterscheidet sich von der Art und Weise, wie CSS-Stilattributen, die 'früher' in der Kaskade gesetzt wurden, überschrieben werden). 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.

Da die geklonten Knoten nicht sichtbar sind, muss beim Styling eines <use>-Elements und seiner geklonten Nachkommen mit CSS Sorgfalt walten lassen. CSS-Eigenschaften werden nicht garantiert vom geklonten DOM geerbt, es sei denn, sie werden explizit durch CSS-Vererbung angefordert.

Aus Sicherheitsgründen können Browser die Same-Origin-Policy auf <use>-Elementen anwenden und möglicherweise das Laden einer URL aus einer anderen Herkunft im href-Attribut ablehnen. Derzeit gibt es keinen definierten Weg, eine Cross-Origin-Policy für <use>-Elemente festzulegen.

Laden von Ressourcen aus externen Dateien über `<use>`

Sie können Knoten aus einer externen SVG-Datei über das <use>-Element laden, indem Sie den Pfad der Datei angeben, gefolgt von einem URL-Fragment, das auf die id des zu ladenden Knotens zeigt:

html

<svg>
  <use href="../assets/my-svg.svg#my-fragment"></use>
</svg>

Historisch war das URL-Fragment immer erforderlich, auch wenn Sie nur das gesamte SVG-Dokument laden wollten. In einem solchen Fall wäre die id auf dem SVG-Wurzelelement enthalten:

html

<svg xmlns="http://www.w3.org/2000/svg" id="my-fragment">
  <circle cx="150" cy="100" r="80" fill="green" />
</svg>

Moderne Implementierungen wurden jedoch aktualisiert, sodass Sie, wenn Sie das gesamte externe Dokument laden möchten, darauf ohne URL-Fragment verweisen können (und die id ist nicht mehr auf dem Wurzelelement des SVG-Dokuments erforderlich):

html

<svg>
  <use href="../assets/my-svg.svg"></use>
</svg>

Überprüfen Sie die Tabelle zur Browser-Kompatibilität für die Browserunterstützung.

Laden von Ressourcen aus Data-URIs über `<use>`

Das Laden von Ressourcen mit Data-URIs im href-Attribut ist aus Sicherheitsgründen veraltet. Dies gilt für <use href="data:..." und auch beim Setzen von href mithilfe der set- oder setAttribute-Methode.

Auch hier überprüfen Sie die Tabelle zur Browser-Kompatibilität für die Browserunterstützung.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # UseElement

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden