SVG/Elemente/symbol

Aus SELFHTML-Wiki
< SVG‎ | Elemente
Wechseln zu: Navigation, Suche

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.

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.


Siehe auch

Weblinks

Start-Tag: notwendig
End-Tag: ggf. notwendig
<symbol />
<symbol>
  <!-- Kindelement(e) -->
</symbol>
Elternelemente Darf vorkommen in:

allen Elementen

erlaubte Inhalte

Animationselemente: animate, animateMotion, animateTransform, set
Beschreibungselemente: title, desc

Container-ElementeContainer-Elemente

Information: Container-Elemente (SVG)

Elemente, die grafische oder andere Container-Elemente enthalten dürfen
grafische Elementegrafische Elemente

Information: grafische Elemente (SVG)

Elemente, die dazu führen, dass etwas gezeichnet wird
clipPath, cursor, filter, foreignObject, image, linearGradient, radialGradient, script, style, text, view
Browsersupport Details: {{{caniuse}}}
Attribute
Name Inhalt Standardwert Bedeutung
Kernattribute
class ID ordnet ein Element einer oder mehreren Klassen zu.
id ID identifiziert ein einziges Element innerhalb eines Dokuments
lang ID identifiziert eine Sprachangabe
style ID CDATA Stilangabe durch Präsentationsattribute
tabindex ID macht Element „antabbbar“
xml:base CDATA Basis-URL
xml:lang Sprachkürzel legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest [RFC1766]
xml:space default, preserve Verhalten gegenüber whitespace)


Präsentationsattribute
alignment-baseline
baseline-shift
clip
clip-path
clip-rule
color
cursor
cx (SVG2)
cy (SVG2)
direction
display
dominant-baseline
filter
flood-color
flood-opacity
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-orientation-horizontal
glyph-orientation-vertical
height (SVG2)
isolation
letter-spacing
lighting-color
mask
opacity
overflow
pointer-events
r (SVG2)
rx (SVG2)
ry (SVG2)
text-anchor
text-decoration
unicode-bidi
visibility
word-spacing
writing-mode
width (SVG2)
x (SVG2)
y (SVG2)


preserveAspectRatio CDATA
viewBox CDATA

Attribut: Pflichtattribut
Attribut: optionales Attribut