<symbol>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.

Das<symbol>SVG-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 mehrfach im selben Dokument verwendet werden, fügt Struktur und Semantik hinzu. Dokumente, die reich an Struktur sind, können grafisch, als Sprache oder als Braille dargestellt werden und fördern somit die Barrierefreiheit.

Hinweis:Ein<symbol>-Element selbst ist nicht zur Darstellung vorgesehen. Nur Instanzen eines<symbol>-Elements (d.h. ein Verweis auf ein<symbol> durch ein<use>-Element) werden dargestellt. Das bedeutet, dass einige Browser möglicherweise die direkte Anzeige eines<symbol>-Elements verweigern könnten, selbst wenn die CSS-Eigenschaftdisplay etwas anderes angibt.

Verwendungskontext

Kategorien	Container-Element, Strukturelement
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente `<a>`,`<clipPath>`,`<filter>`,`<foreignObject>`,`<image>`,`<marker>`,`<mask>`,`<pattern>`,`<script>`,`<style>`,`<switch>`,`<text>`,`<view>`

Attribute

height: Dieses Attribut bestimmt die Höhe des Symbols.Wertetyp:<length> |<percentage>;Standardwert:auto;Animierbar:ja
preserveAspectRatio: Dieses Attribut definiert, wie das SVG-Fragment deformiert werden muss, wenn es in ein Container mit einem anderenSeitenverhältnis eingebettet wird.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 Referenzpunkts des Symbols.Wertetyp:<length> |<percentage> |left |center |right;Standardwert: Keiner;Animierbar:ja
refY: Dieses Attribut bestimmt die y-Koordinate des Referenzpunkts des Symbols.Wertetyp:<length> |<percentage> |top |center |bottom;Standardwert: Keiner;Animierbar:ja
viewBox: Dieses Attribut definiert die Begrenzung des SVG-Viewports für das aktuelle Symbol.Wertetyp:<list-of-numbers>;Standardwert: keiner;Animierbar:ja
width: Dieses Attribut bestimmt die Breite des Symbols.Wertetyp:<length> |<percentage>;Standardwert:auto;Animierbar:ja
x: Dieses Attribut bestimmt die x-Koordinate des Symbols.Wertetyp:<length> |<percentage>;Standardwert:0;Animierbar:ja
y: Dieses Attribut bestimmt die y-Koordinate des Symbols.Wertetyp:<length> |<percentage>;Standardwert:0;Animierbar:ja

DOM-Schnittstelle

Dieses Element implementiert dieSVGSymbolElement-Schnittstelle.

Beispiel

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">  <!-- Our symbol in its own coordinate system -->  <symbol 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" opacity="1.0" />  <use href="#myDot" x="20" y="5" opacity="0.8" />  <use href="#myDot" x="35" y="5" opacity="0.6" />  <use href="#myDot" x="50" y="5" opacity="0.4" />  <use href="#myDot" x="65" y="5" opacity="0.2" /></svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # SymbolElement

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen •Fehler mit dieser Übersetzung melden

Movatterモバイル変換