SVG/Element/symbol

Das symbol-Element gruppiert Objekte und identifiziert sie mit einer ID eindeutig. Diese Objekte werden wie Objekte im Definitionsabschnitt nicht gerendert, können mithilfe des use-Elements aber beliebig oft aufgerufen werden.

Syntax

Start-Tag: notwendig

End-Tag: ggf. notwendig

Elternelemente

Darf vorkommen in:
allen Elementen

erlaubte Inhalte

Animationselemente: animate, animateMotion, animateTransform, set

Beschreibungselemente: title, desc

• Container-Elemente
• grafische Elemente
• clipPath, cursor, filter, foreignObject, image, linearGradient, radialGradient, script, style, text, view

Attribute

Name	Inhalt	Standardwert	Bedeutung
preserveAspectRatio	CDATA
viewBox	CDATA

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.

Empfehlung: Sie können das use-Element beliebig skalieren, ein transform direkt auf dem symbol-Element wird in Chrome nicht ausgeführt!

Siehe auch

• SVG/Tutorials/Gruppierungen#symbol

Weblinks

• W3C: The symbol Element