<use>

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das <use>-Element nimmt Knoten innerhalb eines SVG-Dokuments und dupliziert sie an einer anderen Stelle. Der Effekt ist derselbe, als ob die Knoten tief in einen nicht sichtbaren DOM geklont und dann dort eingefügt würden, 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 Hinweise zur Verwendung für Details zu häufigen Fallstricken.
Wertetyp: <URL>; Standardwert: keiner; Animierbar: ja
xlink:href: Ein <IRI>-Verweis auf ein Element/Fragment, das dupliziert werden muss. Wenn sowohl href als auch xlink:href vorhanden sind, wird der in href angegebene Wert verwendet.
Wertetyp: <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 abschließenden Offset-Transformation, die auf das <use>-Element angewendet wird.
Wertetyp: <coordinate>; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen abschließenden 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 keine Auswirkungen auf <use>-Elemente, es sei denn, das referenzierte Element hat ein viewBox - d.h. sie haben nur Einfluss, wenn <use> sich auf ein <svg>- oder <symbol>-Element bezieht.

Hinweis: Ab SVG2 sind x, y, width und height Geometry Properties, 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 mehrere Kreise mit unterschiedlichen Füll- und Konturfarben zu zeichnen.

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" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

Verwendungshinweise

Die meisten Attribute von <use> werden ignoriert, wenn das entsprechende Attribut bereits auf dem durch <use> referenzierten Element definiert ist. (Dies unterscheidet sich davon, wie CSS-Stilattributvorgaben die früher in der Kaskade gesetzten Eigenschaften überschreiben). Nur die Attribute x, y, width, height und href am <use>-Element werden oder könnten eine gewisse Wirkung haben, wie später beschrieben, wenn das referenzierte Element bereits das entsprechende Attribut definiert hat. Jedoch werden alle anderen Attribute, die am referenzierten Element nicht gesetzt sind, auf das <use>-Element angewendet.

Da die geklonten Knoten nicht sichtbar sind, muss bei der Verwendung von CSS zur Gestaltung eines <use>-Elements und seiner geklonten Nachfolger Vorsicht walten lassen. CSS-Eigenschaften werden nicht garantiert von dem geklonten DOM geerbt, es sei denn, Sie beauftragen sie ausdrücklich durch CSS-Inheritance.

Aus Sicherheitsgründen können Browser die Same-origin policy auf <use>-Elemente anwenden und möglicherweise das Laden einer Cross-Origin-URL im href-Attribut verweigern. Derzeit gibt es keine definierte Möglichkeit, eine Cross-Origin-Richtlinie 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, selbst wenn Sie das gesamte SVG-Dokument laden wollten. In einem solchen Fall würde die id auf dem SVG-Wurzelelement enthalten sein:

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, wenn Sie das gesamte externe Dokument laden möchten, Sie darauf verweisen können, ohne ein URL-Fragment (und die id ist nicht mehr auf dem Wurzelelement des SVG-Dokuments erforderlich):

html

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

Prüfen Sie die Browser-Kompatibilität-Tabelle für die Unterstützung durch Browser.

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

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 durch die Verwendung der set oder setAttribute-Methode.

Auch hier sollten Sie die Browser-Kompatibilität-Tabelle für die Unterstützung durch Browser überprüfen.

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # UseElement

Browser-Kompatibilität

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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