<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 aus einem SVG-Dokument und dupliziert sie an anderer Stelle. Der Effekt ist derselbe, als ob die Knoten tief in ein nicht offengelegtes DOM geklont und dann dort eingefügt würden, wo das <use> Element ist, ähnlich wie geklonte <template> Elemente.

Einsatzkontext

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 Nutzungshinweise für Details zu häufigen Fallstricken.
Werttyp: <URL>; Standardwert: keiner; Animierbar: ja
xlink:href: 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

Warnung: Seit SVG 2 ist das xlink:href Attribut zugunsten von href veraltet. Siehe die xlink:href Seite für weitere Informationen.
x: Die x-Koordinate einer zusätzlichen, abschließenden Offset-Transformation, die auf das <use> Element angewendet wird.
Werttyp: <coordinate>; Standardwert: 0; Animierbar: ja
y: Die y-Koordinate einer zusätzlichen, abschließenden 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 einen viewBox - das heißt, 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.

DOM-Schnittstelle

Dieses Element implementiert die SVGUseElement Schnittstelle.

Beispiel

Das folgende Beispiel zeigt, wie das <use> Element verwendet wird, um mehrere Kreise mit unterschiedlichen Füll- und Strichfarben 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>

Nutzungshinweise

Die meisten Attribute auf <use> werden ignoriert, wenn das entsprechende Attribut bereits auf dem durch <use> referenzierten Element definiert ist. (Dies unterscheidet sich von der Art und Weise, wie CSS-Stilattributen Vorrang vor früher gesetzten in der Kaskade gegeben wird). Nur die Attribute x, y, width, height und href auf dem <use> Element werden oder können einen Effekt haben, der nachfolgend beschrieben wird, wenn das referenzierte Element das entsprechende Attribut bereits definiert hat. Alle anderen Attribute, die nicht auf dem referenzierten Element gesetzt sind, werden jedoch auf das <use> Element angewendet.

Da die geklonten Knoten nicht offenliegen, muss beim Stylen eines <use> Elements und seiner geklonten Nachkommen mit CSS Vorsicht walten gelassen werden. CSS-Eigenschaften werden nicht garantiert von dem geklonten DOM geerbt, es sei denn, Sie fordern dies ausdrücklich an, indem Sie CSS-Vererbung verwenden.

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 ablehnen. Derzeit gibt es keine definierte Möglichkeit, eine Cross-Origin-Richtlinie für <use> Elemente festzulegen.

Laden von Ressourcen aus externen Dateien via `<use>`

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

html

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

Historisch gesehen war das URL-Fragment immer erforderlich, selbst wenn Sie nur 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 Sie, wenn Sie das gesamte externe Dokument laden möchten, auf dieses ohne ein URL-Fragment verweisen können (und die id ist nicht mehr erforderlich auf dem SVG-Dokumentenwurzelelement):

html

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

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

Laden von Ressourcen aus Daten-URIs via `<use>`

Das Laden von Ressourcen mit Daten-URIs im href Attribut ist aus Sicherheitsgründen veraltet. Dies gilt für <use href="data:..." ebenso wie für das Setzen von href durch die Verwendung der set oder setAttribute Methode.

Auch hier sollten Sie die Browser-Kompatibilität Tabelle für die Browserunterstützung ü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