<symbol>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Das <symbol>
-Element wird verwendet, um grafische Vorlageobjekte zu definieren, die von einem <use>
-Element instanziiert werden können.
Die Verwendung von <symbol>
-Elementen für Grafiken, die mehrmals in demselben Dokument verwendet werden, fügt Struktur und Semantik hinzu. Dokumente, die reich an Struktur sind, können grafisch, als Sprache oder als Braille-Text dargestellt werden und fördern somit die Zugänglichkeit.
Beispiel
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path
d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none"
stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" style="opacity:1.0" />
<use href="#myDot" x="20" y="5" style="opacity:0.8" />
<use href="#myDot" x="35" y="5" style="opacity:0.6" />
<use href="#myDot" x="50" y="5" style="opacity:0.4" />
<use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>
Attribute
height
-
Dieses Attribut bestimmt die Höhe des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert:
auto
; Animierbar: ja preserveAspectRatio
-
Dieses Attribut definiert, wie das SVG-Fragment verformt werden muss, wenn es in einem Container mit einem anderen Seitenverhältnis eingebettet ist. Wertetyp: (
none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ; Standardwert:xMidYMid meet
; Animierbar: ja refX
-
Dieses Attribut bestimmt die x-Koordinate des Referenzpunktes des Symbols. Wertetyp: <Länge>|<Prozentsatz>|
left
|center
|right
; Standardwert: Keine; Animierbar: ja refY
-
Dieses Attribut bestimmt die y-Koordinate des Referenzpunktes des Symbols. Wertetyp: <Länge>|<Prozentsatz>|
top
|center
|bottom
; Standardwert: Keine; Animierbar: ja viewBox
-
Dieses Attribut definiert die Begrenzung des SVG-Ansichtsfensters für das aktuelle Symbol. Wertetyp: <list-of-numbers> ; Standardwert: Keine; Animierbar: ja
width
-
Dieses Attribut bestimmt die Breite des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert:
auto
; Animierbar: ja x
-
Dieses Attribut bestimmt die x-Koordinate des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert:
0
; Animierbar: ja y
-
Dieses Attribut bestimmt die y-Koordinate des Symbols. Wertetyp: <Länge>|<Prozentsatz> ; Standardwert:
0
; Animierbar: ja
Verwendungskontext
Kategorien | Container-Element, Strukturelement |
---|---|
Erlaubter Inhalt | Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente <a> , <clipPath> , <cursor> , <filter> , <font> , <font-face> , <foreignObject> , <image> , <marker> , <mask> , <pattern> , <script> , <style> , <switch> , <text> , <view> |
Hinweis: Ein <symbol>
-Element selbst soll nicht dargestellt werden. Nur Instanzen eines <symbol>
-Elements (d. h. ein Verweis auf ein <symbol>
durch ein <use>
-Element) werden dargestellt. Das bedeutet, dass einige Browser sich weigern könnten, ein <symbol>
-Element direkt anzuzeigen, selbst wenn die CSS-Eigenschaft display
etwas anderes angibt.
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # SymbolElement |
Browser-Kompatibilität
BCD tables only load in the browser