SVG/Element/use

Das use-Element ruft im Definitionsabschnitt festgelegte grafische Elemente zur Verwendung auf.

Syntax: Start-Tag: notwendig; End-Tag: ggf. notwendig
Elternelemente: Darf vorkommen in:
erlaubte Inhalte: Animationselemente: animate, animateMotion, animateTransform, set

Beschreibungselemente: title, desc

Attribute
Name	Inhalt	Bedeutung
height	NUMBER	Höhe
href	CDATA	Referenzierung im Definitionsabschnitt festgelegter Objekte
transform	CDATA
width	NUMBER	Breite
x	NUMBER	X-Koordinate
y	NUMBER	Y-koordinate
Xlink:href	CDATA	Referenzierung im Definitionsabschnitt festgelegter Objekte

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

<symbol id="wheel" x="-10" y="-10" height="20" width="20" viewBox="-10 -10 20 20">
	<desc>Autoreifen mit Ventil, damit eine Rotation später sichtbar wird</desc>
	<circle cx="0" cy="0" r="8" />
	<path d="m0,6 v2" />
</symbol>

<use href="#wheel" x="100" y="100" height="20" width="20" />
<use href="#wheel" x="150" y="100" height="20" width="20" />	
	
<use href="#wheel" x="-150" y="100" height="20" width="20" />
<use href="#wheel" x="-100" y="100" height="20" width="20" />

In diesem Beispiel wird ein symbol mit der id wheel angelegt. Es enthält eine Beschreibung mit desc, den schon bekannten Kreis mit der Randlinie als Reifen und der Füllung als Radkappe und zusätzlich einen Pfad, der eine Ventilkappe darstellen soll. Das symbol-Element selbst wird nicht dargestellt, jedoch viermal über seine id referenziert und mit einem use-Element aufgerufen.

Beachten Sie: Sie können auch SVG Elemente aus externen SVG Dateien einbinden. Das href-Attribut akzeptiert jede URI. Um das Element mit der Id wheel aus der Datei auto.svg einzubinden, schreiben Sie href="auto.svg#wheel".

Wenn Sie dies tun, stellt sich die Frage, welche Stylesheets für dieses eingebundene Element gelten soll. Die Browserhersteller verfahren zur Zeit einheitlich so, dass Style-Regeln, die in auto.svg notiert sind, nicht verwendet werden. Firefox wendet allerdings die Style-Regeln des einbindenden Dokuments an, wenn das wheel-Element in auto.svg also beispielsweise ein Element mit der Klasse hub-cap enthält, würde Firefox eine Regeln mit Selektor .hub-capim Dokument-Stylesheet darauf anwenden. Bei Chrome ist man dagegen der Ansicht, dass dies ein Fehler sei^[1] und nennt dies das korrekte Verhalten. Im gleichen Bugreport heißt es aber auch, dass die Styles aus auto.svg angewendet werden sollten - was sie aber seit 2015 vor sich her schieben.

Einheitlich gelöst ist aber, dass CSS custom properties, die auf dem use-Element vorhanden sind, für das eingebundene Element sichtbar sind. Wenn Sie also eine Figurenbibliothek als SVG Datei anlegen wollen, können Sie vorsehen, dass sich beispielsweise Farben oder Füllungen per custom property einstellen lassen.