SVG-Referenz
SVG-Zeichnungen und -Bilder werden mit verschiedenen Elementen erstellt. Hier finden Sie eine Tabelle der SVG-Elemente mit Beschreibungen und Attributen.
SVG (Scalable Vector Graphics) ist eine XML-basierte Auszeichnungssprache zur Beschreibung zweidimensionaler Grafiken, die in jeder Größe scharf bleiben. Jede Form, jeder Farbverlauf, jeder Filter oder jede Animation in einem SVG-Dokument wird mit einem dedizierten Element geschrieben. Diese Seite ist eine schnelle Nachschlagetabelle aller Standard-SVG-Elemente, nach Zweck gruppiert, mit einer kurzen Beschreibung und den Attributen, die am häufigsten benötigt werden. Nutzen Sie sie als Ergänzung zu den praktischen Kapiteln — beginnen Sie mit der SVG-Einführung und SVG in HTML5 — und kehren Sie hierher zurück, wenn Sie nachschlagen möchten, was ein Element tut oder welche Attribute es akzeptiert.
In der Spalte Attribute beschreibt ein Eintrag wie attr="…" den Wert, den ein schreibbares Attribut erwartet, während presentation attributes: … die Gruppen von CSS-stilisierbaren Präsentationsattributen auflistet, die das Element unterstützt. Veraltete Elemente sind gekennzeichnet und verweisen, wo vorhanden, auf den modernen Ersatz.
Grundlegende Formen
Geometrische Primitive zum Zeichnen der sichtbaren Grafiken eines SVG.
| Element | Beschreibung | Attribute |
|---|---|---|
<circle> | Zeichnet einen Kreis. Siehe das Kapitel SVG circle. | cx="x-Achse Mittelpunkt des Kreises" cy="y-Achse Mittelpunkt des Kreises" r="Radius des Kreises (erforderlich)" presentation attributes: Color, FillStroke, Graphics |
<ellipse> | Zeichnet eine Ellipse. Siehe das Kapitel SVG ellipse. | cx="x-Achse Mittelpunkt der Ellipse" cy="y-Achse Mittelpunkt der Ellipse" rx="Radius entlang der x-Achse (erforderlich)" ry="Radius entlang der y-Achse (erforderlich)" presentation attributes: Color, FillStroke, Graphics |
<line> | Zeichnet eine gerade Linie zwischen zwei Punkten. Siehe das Kapitel SVG line. | x1="x-Startpunkt der Linie" y1="y-Startpunkt der Linie" x2="x-Endpunkt der Linie" y2="y-Endpunkt der Linie" presentation attributes: Color, FillStroke, Graphics, Markers |
<path> | Zeichnet eine beliebige Form aus einer Reihe von Pfadbefehlen. Siehe das Kapitel SVG path. | d="eine Menge von Befehlen, die den Pfad beschreiben" pathLength="die Gesamtlänge des Pfads" transform="eine Liste von Transformationen" presentation attributes: Color, FillStroke, Graphics, Markers |
<polygon> | Zeichnet eine geschlossene Form aus einer Liste von mindestens drei Punkten. Siehe das Kapitel SVG polygon. | points="die Punkte des Polygons (mindestens drei sind erforderlich)" fill-rule="Teil der FillStroke-Präsentationsattribute" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Zeichnet eine offene Form aus verbundenen geraden Liniensegmenten. Siehe das Kapitel SVG polyline. | points="die Punkte der Polylinie (erforderlich)" presentation attributes: Color, FillStroke, Graphics, Markers |
<rect> | Zeichnet ein Rechteck, optional mit abgerundeten Ecken. Siehe das Kapitel SVG rectangle. | x="x-Achse obere linke Ecke des Rechtecks" y="y-Achse obere linke Ecke des Rechtecks" rx="x-Achse Eckenradius (zum Abrunden des Elements)" ry="y-Achse Eckenradius (zum Abrunden des Elements)" width="Breite des Rechtecks (erforderlich)" height="Höhe des Rechtecks (erforderlich)" presentation attributes: Color, FillStroke, Graphics |
Text
Elemente zum Rendern und Anordnen von Text innerhalb eines SVG. Siehe das Kapitel SVG text.
| Element | Beschreibung | Attribute |
|---|---|---|
<text> | Zeichnet einen Textabschnitt an einer bestimmten Position. | x="eine Liste von x-Achsen-Positionen; die n-te Position wird dem n-ten Zeichen zugewiesen (Standard 0)" y="eine Liste von y-Achsen-Positionen (siehe x; Standard 0)" dx="Längen, die Zeichen relativ zur absoluten Position des letzten Glyphs verschieben (siehe x)" dy="Längen, die Zeichen relativ zur absoluten Position des letzten Glyphs verschieben (siehe x)" rotate="eine Liste von Rotationen; die n-te Rotation wird auf das n-te Zeichen angewendet" textLength="eine Ziellänge, in die der Viewer versucht, den Text durch Anpassen von Abständen und/oder Glyphen einzupassen (Standard: die normale Länge des Textes)" lengthAdjust="was angepasst werden soll, um textLength zu erfüllen: 'spacing' oder 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Legt Text entlang der Form eines referenzierten <path>-Elements an. | href="URI-Referenz auf den Pfad, entlang dem der Text angeordnet wird" |
<tspan> | Markiert einen Teilbereich von Text innerhalb eines <text>- oder <tspan>-Elements, um ihn zu stilisieren oder neu zu positionieren. | Identisch mit dem <text>-Element, und zusätzlich: href="Referenz auf ein <text>-Element" |
Farbverläufe und Muster
Paint-Server, die Formen mit Farbverläufen oder sich wiederholenden Kacheln füllen oder umranden. Siehe die Kapitel zu linearen Farbverläufen und radialen Farbverläufen.
| Element | Beschreibung | Attribute |
|---|---|---|
<linearGradient> | Definiert einen Farbverlauf, der Farben entlang eines geraden Vektors übergeht. | id="eine eindeutige ID zur Referenzierung dieses Farbverlaufs (erforderlich zur Referenzierung)" gradientUnits="'userSpaceOnUse' oder 'objectBoundingBox' (Standard 'objectBoundingBox')" gradientTransform="die Transformation, die auf den Farbverlauf angewendet wird" x1="x-Start des Verlaufsvektors (Zahl oder %; Standard 0%)" y1="y-Start des Verlaufsvektors (Standard 0%)" x2="x-Ende des Verlaufsvektors (Standard 100%)" y2="y-Ende des Verlaufsvektors (Standard 0%)" spreadMethod="'pad', 'reflect' oder 'repeat'" href="Referenz auf einen anderen Farbverlauf, dessen Attribute und Stops als Standards vererbt werden (rekursiv)" |
<radialGradient> | Definiert einen Farbverlauf, der Farben von einem Mittelpunkt nach außen übergeht. | gradientUnits="'userSpaceOnUse' oder 'objectBoundingBox' (Standard 'objectBoundingBox')" gradientTransform="Transformation, die auf den Farbverlauf angewendet wird" cx="Mittelpunkt des Farbverlaufs (Zahl oder %; Standard 50%)" cy="Mittelpunkt des Farbverlaufs (Standard 50%)" r="Radius des Farbverlaufs (Standard 50%)" fx="Fokuspunkt des Farbverlaufs (Standard 0%)" fy="Fokuspunkt des Farbverlaufs (Standard 0%)" spreadMethod="'pad', 'reflect' oder 'repeat'" href="Referenz auf einen anderen Farbverlauf, dessen Attribute und Stops als Standards vererbt werden (rekursiv)" |
<stop> | Definiert eine Farbe und ihren Versatz innerhalb eines Farbverlaufs. | offset="Versatz für diesen Stop, 0 bis 1 oder 0% bis 100% (erforderlich)" stop-color="Farbe dieses Stops" stop-opacity="Deckkraft dieses Stops, 0 bis 1" |
<pattern> | Definiert eine Grafikkachel, die wiederholt wird, um eine Form zu füllen oder zu umranden. | id="eindeutige ID zur Referenzierung dieses Musters (erforderlich)" patternUnits="'userSpaceOnUse' oder 'objectBoundingBox'; der zweite Wert macht x, y, width, height zu einem Bruchteil (oder %) des Begrenzungsrahmens des Objekts, das das Muster verwendet" patternContentUnits="'userSpaceOnUse' oder 'objectBoundingBox'" patternTransform="eine Transformation, die auf das gesamte Muster angewendet wird" x="Musterversatz von der oberen linken Ecke (Standard 0)" y="Musterversatz von der oberen linken Ecke (Standard 0)" width="Breite der Musterkachel (Standard 100%)" height="Höhe der Musterkachel (Standard 100%)" viewBox="der sichtbare Bereich dieses Zeichenbereichs: min-x, min-y, width, height (durch Leerzeichen oder Kommas getrennt)" href="Referenz auf ein anderes Muster, dessen Attribute als Standards vererbt werden und dessen Kinder vererbt werden (rekursiv)" |
Filter
Filterprimitiven (die fe*-Familie) und der <filter>-Container, die kombiniert grafische Effekte wie Unschärfen, Beleuchtung und Farbverschiebungen erzeugen. Siehe die Kapitel zur SVG-Filter-Einführung, Unschärfeeffekten und Schlagschatten.
| Element | Beschreibung | Attribute |
|---|---|---|
<filter> | Container, der Filterprimitiven zu einem wiederverwendbaren, benannten Filtereffekt gruppiert. | |
<feBlend> | Mischt zwei Eingabebilder mit einem Mischmodus zusammen. | mode="Mischmodus: normal|multiply|screen|darken|lighten" in="erste Eingabe: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="die zweite Eingabe für den Mischvorgang" result |
<feColorMatrix> | Wendet eine Matrixtransformation auf die Farb- und Alphakanäle der Eingabe an. | in="identifiziert das Eingabebild" type="matrix|saturate|hueRotate|luminanceToAlpha" values="die Werte für den gewählten Typ" result |
<feComponentTransfer> | Mappt jeden Farb-/Alphakanal unabhängig mithilfe seiner feFunc*-Kinder neu. | in="identifiziert das Eingabebild" result |
<feFuncA> | Definiert die Übertragungsfunktion für den Alphakanal von <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncR> | Definiert die Übertragungsfunktion für den Rotkanal von <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncG> | Definiert die Übertragungsfunktion für den Grünkanal von <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feFuncB> | Definiert die Übertragungsfunktion für den Blaukanal von <feComponentTransfer>. | type="identity|table|discrete|linear|gamma" tableValues slope intercept amplitude exponent offset |
<feComposite> | Kombiniert zwei Eingaben mit Porter-Duff- oder arithmetischen Kompositionsoperatoren. | in="identifiziert das erste Eingabebild" in2="identifiziert das zweite Eingabebild" operator="over|in|out|atop|xor|arithmetic" k1="arithmetischer Koeffizient" k2="arithmetischer Koeffizient" k3="arithmetischer Koeffizient" k4="arithmetischer Koeffizient" result |
<feConvolveMatrix> | Wendet eine Faltungsmatrix (Kernel) für Effekte wie Schärfung oder Prägung an. | in="identifiziert das Eingabebild" order="Anzahl der Spalten und Zeilen in der Kernelmatrix" kernelMatrix="Liste der Kernelwerte" divisor="Divisor für die Kernelwerte" bias="Biaswert" targetX="x-Position der Faltungsmatrix" targetY="y-Position der Faltungsmatrix" edgeMode="duplicate|wrap|none" kernelUnitLength="Länge des Kernels" preserveAlpha="true|false" result |
<feDiffuseLighting> | Beleuchtet das Eingabebild als diffuse (matte) Oberfläche, wobei das Alpha als Bump-Map verwendet wird. | in="identifiziert das Eingabebild" surfaceScale="Oberflächenskalierungsfaktor" diffuseConstant="diffuse Reflexionskonstante" kernelUnitLength="Länge des Kernels" result |
<feDisplacementMap> | Verschiebt die Pixel einer Eingabe anhand der Farbkanäle einer anderen. | in="identifiziert das erste Eingabebild" in2="identifiziert das zweite Eingabebild" scale="Skalierungsfaktor" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | Definiert eine entfernte (gerichtete) Lichtquelle für einen Beleuchtungsfilter. | azimuth="Azimutwinkel" elevation="Erhebungswinkel" |
<feFlood> | Füllt den Filterbereich mit einer einzelnen Farbe und Deckkraft. | flood-color="Füllfarbe" flood-opacity="Füllopazität" result |
<feGaussianBlur> | Wendet einen Gaußschen Weichzeichner auf das Eingabebild an. | in="identifiziert das Eingabebild" stdDeviation="Standardabweichung für den Weichzeichner" edgeMode="duplicate|wrap|none" result |
<feImage> | Lädt ein externes Bild oder ein referenziertes Element als Filtereingabe. | href="URI-Referenz auf das Bild" preserveAspectRatio="'none' oder eine der 9 Kombinationen von 'xVALYVAL'" result |
<feMerge> | Stapelt mehrere Eingaben in Ebenen mit <feMergeNode>-Kindern. | result |
<feMergeNode> | Identifiziert eine Eingabeebene für ein übergeordnetes <feMerge>. | in="identifiziert das Eingabebild" |
<feMorphology> | Verdünnt (erodiert) oder verdickt (dilatiert) das Eingabebild. | in="identifiziert das Eingabebild" operator="erode|dilate" radius="Radius des Effekts" result |
<feOffset> | Verschiebt das Eingabebild um einen bestimmten Versatz (die Grundlage von Schlagschatten). | in="identifiziert das Eingabebild" dx="horizontaler Versatz" dy="vertikaler Versatz" result |
<fePointLight> | Definiert eine Punktlichtquelle für einen Beleuchtungsfilter. | x="x-Position der Lichtquelle" y="y-Position der Lichtquelle" z="z-Position der Lichtquelle" |
<feSpecularLighting> | Beleuchtet das Eingabebild als spekulare (glänzende) Oberfläche, wobei das Alpha als Bump-Map verwendet wird. | in="identifiziert das Eingabebild" surfaceScale="Oberflächenskalierungsfaktor" specularConstant="spekulare Reflexionskonstante" specularExponent="spekularer Exponent" kernelUnitLength="Länge des Kernels" result |
<feSpotLight> | Definiert eine Spotlichtquelle für einen Beleuchtungsfilter. | x="x-Position der Lichtquelle" y="y-Position der Lichtquelle" z="z-Position der Lichtquelle" pointsAtX="x-Koordinate, auf die das Licht zeigt" pointsAtY="y-Koordinate, auf die das Licht zeigt" pointsAtZ="z-Koordinate, auf die das Licht zeigt" specularExponent="spekularer Exponent" limitingConeAngle="begrenzender Kegelwinkel" |
<feTile> | Wiederholt (kachelt) eine Filtereingabe, um den Filterbereich zu füllen. | in="identifiziert das Eingabebild" result |
<feTurbulence> | Erzeugt Perlin-Turbulenz oder fraktales Rauschen (für Texturen wie Wolken oder Marmor). | baseFrequency="Grundfrequenz" numOctaves="Anzahl der Oktaven" seed="Seed-Wert" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
Animation
Elemente, die Attributwerte im Laufe der Zeit ändern. Sie sind Kindelemente des Elements, das sie animieren (oder referenzieren es).
| Element | Beschreibung | Attribute |
|---|---|---|
<animate> | Animiert ein einzelnes Attribut oder eine Eigenschaft eines Elements über ein Zeitintervall. | attributeName="der Name des Zielattributs" by="ein relativer Versatzwert" from="der Startwert" to="der Endwert" dur="die Dauer" repeatCount="die Anzahl der Animationsdurchläufe" |
<animateMotion> | Bewegt ein Element entlang eines Bewegungspfads über die Zeit. | calcMode="Interpolationsmodus: 'discrete', 'linear', 'paced' oder 'spline'" path="der Bewegungspfad" keyPoints="wie weit sich das Objekt entlang des Pfads für jeden keyTimes-Wert bewegt" rotate="Rotationstransformation" href="URI-Referenz auf das <path>-Element, das den Bewegungspfad angibt" |
<animateTransform> | Animiert ein transform-Attribut (translate, scale, rotate, skew) über die Zeit. | by="relativer Versatzwert" from="Startwert" to="Endwert" type="zu ändernder Transformationstyp: 'translate', 'scale', 'rotate', 'skewX' oder 'skewY'" |
<mpath> | Referenziert ein externes <path>-Element zur Verwendung als Bewegungspfad für <animateMotion>. | href="URI-Referenz auf das Pfadelement" |
<set> | Setzt ein Attribut für eine bestimmte Dauer auf einen Wert (eine nicht interpolierte Animation). | attributeName="der Name des Zielattributs" to="der einzustellende Wert" begin="wann die Änderung beginnt" dur="wie lange der Wert gehalten wird" |
Container und Struktur
Elemente, die Inhalte gruppieren, referenzieren, definieren oder organisieren, anstatt sie direkt zu zeichnen.
| Element | Beschreibung | Attribute |
|---|---|---|
<a> | Erstellt einen Link zu einer Webseite, Datei, E-Mail-Adresse, einem Standort oder einer anderen URL. | href target |
<clipPath> | Definiert einen Beschneidungspfad, der den gerenderten Bereich eines Elements begrenzt. | clipPathUnits="'userSpaceOnUse' oder 'objectBoundingBox' (Standard 'userSpaceOnUse')" |
<defs> | Speichert grafische Objekte, die später referenziert und wiederverwendet werden sollen (werden nicht direkt gerendert). | |
<desc> | Stellt eine reine Textbeschreibung für ein SVG-Grafik- oder Containerelement bereit (für Barrierefreiheit). | |
<foreignObject> | Bettet Inhalte aus einem anderen XML-Namespace (wie HTML) in ein SVG ein und lässt den Browser sie rendern. | x y width height |
<g> | Gruppiert Elemente, sodass Transformationen und Präsentationsattribute gemeinsam auf sie angewendet werden. | id="Name der Gruppe" fill="Füllfarbe für die Gruppe" opacity="Deckkraft für die Gruppe" presentation attributes: All |
<image> | Bettet ein Raster- oder SVG-Bild in das Dokument ein. | x="x-Achse obere linke Ecke des Bildes" y="y-Achse obere linke Ecke des Bildes" width="Breite des Bildes (erforderlich)" height="Höhe des Bildes (erforderlich)" href="Pfad zum Bild (erforderlich)" presentation attributes: Color, Graphics, Images, Viewports |
<marker> | Definiert eine Grafik (z. B. einen Pfeilkopf), die an den Scheitelpunkten einer Linie, Polylinie oder eines Pfads über marker-start, marker-mid und marker-end gezeichnet wird. Definieren Sie den Marker vor der Referenzierung. | markerUnits="'strokeWidth' oder 'userSpaceOnUse'; mit 'strokeWidth' entspricht eine Einheit einer Strichbreite, andernfalls skaliert der Marker nicht (Standard 'strokeWidth')" refX="Position, an der der Marker mit dem Scheitelpunkt verbindet (Standard 0)" refY="Position, an der der Marker mit dem Scheitelpunkt verbindet (Standard 0)" orient="'auto' oder ein Winkel; 'auto' macht die x-Achse zur Tangente des Scheitelpunkts (Standard 'auto')" markerWidth="Breite des Markers (Standard 3)" markerHeight="Höhe des Markers (Standard 3)" viewBox="die viewport-Grenzen: min-x, min-y, width, height (durch Leerzeichen oder Kommas getrennt)" presentation attributes: All |
<mask> | Definiert eine Alphamaske, die Deckkraft und Beschneidung kombiniert; Text, Formen oder Pfade legen fest, welche Teile sichtbar sind (der Standardzustand ist vollständig transparent). | maskUnits="Koordinatensystem für x, y, width, height der Maske: 'userSpaceOnUse' oder 'objectBoundingBox' (Standard 'objectBoundingBox')" maskContentUnits="Koordinatensystem für den Inhalt der Maske: 'userSpaceOnUse' oder 'objectBoundingBox' (Standard 'userSpaceOnUse')" x="Beschneidungsebene der Maske (Standard -10%)" y="Beschneidungsebene der Maske (Standard -10%)" width="Beschneidungsebene der Maske (Standard 120%)" height="Beschneidungsebene der Maske (Standard 120%)" |
<metadata> | Enthält maschinenlesbare Metadaten (wie RDF) über das Dokument; wird nicht gerendert. | |
<script> | Bettet ein Skript (typischerweise JavaScript) für Interaktivität ein oder referenziert es. | href="URI eines externen Skripts" type="MIME-Typ der Skriptsprache" |
<style> | Bettet ein CSS-Stylesheet in das SVG-Dokument ein. | type="Stylesheet MIME-Typ (text/css)" media="Media Query, auf die die Stile angewendet werden" |
<svg> | Der Stamm- (oder ein verschachtelter) Container, der ein SVG-Dokumentfragment und sein Koordinatensystem definiert. | x="obere linke Ecke beim Einbetten (Standard 0)" y="obere linke Ecke beim Einbetten (Standard 0)" width="Breite des Fragments (Standard 100%)" height="Höhe des Fragments (Standard 100%)" viewBox="der sichtbare Bereich dieses Zeichenbereichs: min-x, min-y, width, height (durch Leerzeichen oder Kommas getrennt)" preserveAspectRatio="'none' oder eine der 9 'xVALYVAL'-Kombinationen, wobei VAL 'min', 'mid' oder 'max' ist (Standard xMidYMid)" xmlns="http://www.w3.org/2000/svg" presentation attributes: All |
<switch> | Rendert nur das erste Kindelement, dessen Testattribute (z. B. Sprach- oder Feature-Unterstützung) als wahr ausgewertet werden. | |
<symbol> | Definiert eine wiederverwendbare Vorlage, die erst gerendert wird, wenn sie durch ein <use>-Element instanziiert wird. | |
<title> | Stellt einen kurzen zugänglichen Namen (oft als Tooltip angezeigt) für sein übergeordnetes Element bereit. | |
<use> | Klont und rendert ein referenziertes Element (z. B. <svg>, <g> oder eine Form) anhand seiner ID. | x="x-Achse obere linke Ecke des geklonten Elements" y="y-Achse obere linke Ecke des geklonten Elements" width="Breite des geklonten Elements" height="Höhe des geklonten Elements" href="URI-Referenz auf das geklonte Element" presentation attributes: All |
<view> | Definiert eine benannte Ansicht (eine viewBox und ein Seitenverhältnis), die über eine Fragment-URL angesteuert werden kann. | viewBox preserveAspectRatio zoomAndPan="'magnify' oder 'disable' (Standard magnify)" |
Veraltete Elemente
Diese Elemente sind in SVG 2 veraltet und sollten in neuen Dokumenten vermieden werden. Wo ein moderner Ersatz existiert, wird er in der Beschreibung angegeben.
| Element | Beschreibung | Attribute |
|---|---|---|
<altGlyph> | Steuerte die Glyphen, die zum Rendern bestimmter Zeichendaten verwendet wurden. In SVG 2 veraltet; kein direkter Ersatz (verwenden Sie Unicode-Text in <text>/<tspan>). | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Definierte einen Ersatzsatz für Glyphen. In SVG 2 veraltet; kein Ersatz. | id |
<altGlyphItem> | Definierte einen Kandidatensatz für Glyphenersetzungen. In SVG 2 veraltet; kein Ersatz. | id |
<color-profile> | Beschrieb ein Farbprofil, das auf ein Bild angewendet wurde. In SVG 2 veraltet; verwenden Sie stattdessen die CSS @color-profile-Regel und die color()-Funktion. | local="eindeutige ID für ein lokal gespeichertes Farbprofil" name="Profilname" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href="URI einer ICC-Profilressource" |
<cursor> | Definierte einen plattformunabhängigen benutzerdefinierten Cursor. In SVG 2 veraltet; verwenden Sie stattdessen die CSS-Eigenschaft cursor. | x="x-Achse obere linke Ecke des Cursors (Standard 0)" y="y-Achse obere linke Ecke des Cursors (Standard 0)" href="URI des als Cursor zu verwendenden Bildes" |
<font> | Definierte eine SVG-Schriftart. In SVG 2 veraltet; verwenden Sie stattdessen CSS @font-face mit Web-Schriftformaten. | |
<font-face> | Beschrieb die Eigenschaften einer Schriftart. In SVG 2 veraltet; verwenden Sie stattdessen die CSS @font-face-Regel. | |
<font-face-format> | Gab den Schriftarttyp an, der von seinem übergeordneten <font-face-uri> referenziert wird. In SVG 2 veraltet; verwenden Sie stattdessen den CSS-@font-face-Hinweis format(). | |
<font-face-name> | Referenzierte eine lokale Schriftart anhand des Namens. In SVG 2 veraltet; verwenden Sie stattdessen die CSS-@font-face-Funktion local(). | |
<font-face-src> | Spiegelte den src-Deskriptor von CSS @font-face-Regeln wider. In SVG 2 veraltet; verwenden Sie stattdessen den CSS-@font-face-Deskriptor src. | |
<font-face-uri> | Referenzierte eine entfernte Definition der aktuellen Schriftart. In SVG 2 veraltet; verwenden Sie stattdessen CSS-@font-face src: url(). | |
<glyph> | Definierte die Grafik für eine bestimmte Glyphe in einer SVG-Schriftart. In SVG 2 veraltet; kein Ersatz. | |
<glyphRef> | Referenzierte eine Glyphe zur Verwendung als Alternative. In SVG 2 veraltet; kein Ersatz. | |
<hkern> | Definierte horizontale Kerning-Paare und Anpassungen in einer SVG-Schriftart. In SVG 2 veraltet; verlassen Sie sich stattdessen auf Web-Font-Kerning. | |
<missing-glyph> | Definierte die Glyphe, die verwendet wird, wenn ein Zeichen in einer SVG-Schriftart nicht angezeigt werden kann. In SVG 2 veraltet; kein Ersatz. | |
<tref> | Referenzierte und renderte den Textinhalt eines anderen Elements. In SVG 2 veraltet; kein Ersatz. | href="URI-Referenz auf den referenzierten Textinhalt" |
<vkern> | Definierte vertikale Kerning-Paare in einer SVG-Schriftart. In SVG 2 veraltet; verlassen Sie sich stattdessen auf Web-Font-Kerning. |
Übungen
Übung
Was sind einige der Funktionen, die beim Programmieren in HTML in SVGs enthalten sein können?
Was this page helpful?