Elemente des SVG
Eine Übersicht und Gliederung der Elemente darzustellen, ist hier meine Absicht. Diese Arbeit wird am längsten dauern, da erst mit der Arbeit der eigentliche Umfang ersichtlich wurde.
Somit ist die Aufführung nicht vollumfänglich. Erst mit Erprobung und dessen erfolgreicher Wiedergabe wird die Benennung erweitert.
| Der SVG Container | |
| Element <svg> | Attribute |
| id, class, width, height, x, y, viewBox |
|
| ContainerElemente | |
| Beschreibung: SVG ► Elemente ► ContainerElemente | |
| Element <g> | allgemeines Gruppierungselement Es werden mehrere Elemente zu einer Einheit gruppiert. Innerhalb dieser Gruppe werden Elementen gemeinsame Eigenschaften vererbt. |
| Element <defs> | Definitionsabschnitt für wiederverwendbare Elemente |
| Element <symbol> | Definitionsabschnitt für wiederverwendbare Elemente |
| Element <mask> | auf Farbstärke/Opazität basierende Maskenvorlage
Beschreibung: SVG ► Effekte ► Beschneidungspfad Maskierung |
| Element <use> | Wiederverwendung einzelner Fragmente aus dem Definitionsabschnitt
Beschreibung: SVG ► Effekte ► ContainerElemente |
| Element <filter> | Laut MDN (MozillaDeveloperNetwork) als nicht kategorisiertes Element eingestuft. Na wenn das kein Container ist! Der steht für alle KindElemente <feXxxx /> Beschreibung: SVG ► Elemente ► FilterElemente |
| BasisFormElemente | |
| Beschreibung: SVG ► Elemente ► Grundformen | |
| Element <line> | <line x1="5" y1="5" x2="95" y2="5" />
Attribute: stroke="Farbe", stroke-width="Linienstärke", stroke-dasharray="4%, 2%" und stroke-linecap="Linienende", id und class |
| Element <rect> | <rect x="10" y="10" width="130" height="80" />
Attribute: stroke="Farbe", stroke-width="Linienstärke", fill="Füllfarbe", stroke-dasharray="4%, 2%", stroke-linecap="butt | round | square" und stroke-linejoin="miter | round | bevel", id und class |
| Element <circle> | <circle cx="70" cy="60" r="50" />
Attribute: stroke="Farbe", stroke-width="Linienstärke", fill="Füllfarbe",stroke-dasharray="4%, 2%", id und class |
| Element <ellipse> | <ellipse cx="75" cy="40" rx="60" ry="30" />
Attribute: stroke="Farbe", stroke-width="Linienstärke", fill="Füllfarbe",stroke-dasharray="4%, 2%", id und class |
| Element <polyline> | <polyline points="110,160 110,80 210,80 160,10 110,80 210,160 210,80 110,160 210,160" /> Attribute: stroke="Farbe", stroke-width="Linienstärke", fill="Füllfarbe",stroke-dasharray="4%, 2%", stroke-linecap="butt | round | square" und stroke-linejoin="miter | round | bevel", id und class |
| Element <polygon> | <polygon points="120,180 65,235 127,208 120,180 "> Attribute: stroke="Farbe", stroke-width="Linienstärke", fill="Füllfarbe", stroke-dasharray="4%, 2%", stroke-linecap="butt | round | square" und stroke-linejoin="miter | round | bevel", id und class |
| GrafikElemente | |
| Beschreibung: SVG ► Elemente ► GrafikElemente | |
| Laut MDN zählen hierzu:<circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>. Außer den bereits beschriebenen Grundformen nehme ich hier <path> und <text> auf. Im eigentlichen Sinne stellt für mich <image> kein Grafikelement dar, aber was solls. Ich nehme es hier mit rein. Bei <use> bekomme ich aber Kopfschmerzen. Das ist wie die Bezeichnung schon ansagt nur noch zum Benutzen einer Vorlage. Ick wees nich, ick wees nich! Ja oder ja? | |
| Element <path> | Das Pfad-Element ist ein generisches Element, um eine Form zu definieren. Alle grundlegenden Formen können mit einem Pfad-Element angelegt werden. Mit dem Attribut d wird die Form bestimmt. |
| Alle Kommandos können groß als auch klein geschrieben werden. Versalien kennzeichnen die Positionen aufeinander folgender Koordinaten. Mit Minuskeln wird die auszuführende Distanz zur folgenden Angabe im Koordinatensystem definiert. | |
| Die Konstruktoren | als Eigenschaften des Attributes d |
| M (MoveTo) | Setzt den StartPunkt fest. |
| Geraden | L/l (LineTo) | Zeichnet eine Linie vom Startpunkt/vorherig angegebem Punkt zur angegebenen Koordinate. <path d="M 10 10 L 200 10" /> Zeichnet eine Linie vom Startpunkt/vorherig angegebem Punkt mit der Länge (l 200 10 Länge = Hypothenuse). <path d="M 10 10 l 200 10" /> |
| H/h (Horizontal LineTo) | Zeichnet von vorheriger Koordinate aus eine horizontale Linie
<path d="M 40 38 H 200" /> <path d="M 0 68 h 200" /> Länge H 200-40 = 160px h = 200px |
| V/v (Vertical LineTo) | Zeichnet von vorheriger Koordinate aus eine vertikale Linie |
| Z/z (ClosePath) | Schließt die Form. Formen mit Füllungen schließen das Objekt optisch, jedoch ohne Rand. |
| Bézier-Kurven | |
| C/c (CurveTo) | Zeichnet vom AusgangsPunkt aus eine Bézier-Kurve
Pfad mit kubischer Bézier-Kurvenform <path d="M 5,150 C 5,10 305,10 305,150" /> Positionierung der Punkte durch Kordinatenbestimmung die Kurvenbeschreibung benötigt zwei Kontrollpunkte |
| S/s (Shorthand/Smooth CurveTo) |
|
| Q/q (CurveTo) | Zeichnet vom AusgangsPunkt aus eine Bézier-Kurve
Pfad mit quadratischer Bézier-Kurvenform <path id="quadq" d="M 5,200 q 150,-200 300 0" /> Positionierung der Punkte durch Abstandsbestimmung |
| T/t (Shorthand/Smooth Quadratic Bézier CurveTo) |
|
| A/a (Elliptical Arc) | |
| Element <text> | Für die Browserdarstellung stehen als KindElemente <tspan>...</tspan> und <textPath /> zur Verfügung - bis jetzt. Alles andere bleibt somit unberücksichtigt. Attribut: dx/dy="Zahlenfolge" durch Leerzeichen oder Komma separiert Horizontale/vertikale Verschiebung einzelner Zeichen Attribut: rotate="Zahlenfolge" durch Leerzeichen oder Komma separiert Drehung einzelner Zeichen um die linke Postion auf der Grundlinie. |
| Element <image> | |
| Elemente des Definitionsbereiches | |
| Diese Elemente werden erst durch Referenzierung abgebildet. | |
| VerlaufsElemente | |
| <linearGradient> | |
| <radialGradient> | |
| <stop> | Kindelement |