SVG/Attribut/d

Das d-Attribut (data, engl. für Daten) legt Punkte (Koordinaten) und Kommandos für Pfade fest.

Erlaubte Werte

Pfad-Kommandos (siehe unten)

Standardwert

anwendbar auf

path

Präsentationsattribut

nein

mit CSS animierbar

ja

Beispiel

<path d="M50,200 q100,-100 200,0 t200,0 t200,0 t200,0"/>

Beachten Sie: In SVG 2 sollte das d-Attribut zum Präsentationsattribut werden. Mittlerweile ist es in allen Browsern außer Safari möglich, den Wert als path()-Funktion zu notieren.

Siehe auch

• SVG/Tutorials/Pfade
• SVG/Tutorials/Shape-Morphing#d_als_Präsentationsattribut

Weblinks

• W3C: D Attribute

Pfad-Kommandos

Kommando	Name	Beschreibung
M, m	MoveTo	setzt den aktuellen Punkt fest, von dem aus der Pfad starten soll.
L	LineTo	zeichnet eine Linie vom aktuellen zum angegebenen Punkt.
H	Horizontal LineTo	zeichnet vom aktuellen Punkt aus eine horizontale Linie.
V	Vertical LineTo	zeichnet vom aktuellen Punkt aus eine vertikale Linie.
Z	ClosePath	erstellt eine geschlossene Form.
A	Elliptical Arc	zeichnet vom aktuellen Punkt aus einen elliptischen Bogen.
C	CurveTo	zeichnet vom aktuellen Punkt aus eine Bézier-Kurve.
S	Shorthand/Smooth CurveTo	ähnlich dem Kommando C, jedoch wird hier als erster Kontrollpunkt der letzte aus der direkt zuvor festgelegten Bézier-Kurve verwendet.
Q	Quadratic Bézier CurveTo	zeichnet eine quadratische Bézier-Kurve.
T	Shorthand/Smooth Quadratic Bézier CurveTo	ähnlich dem Kommando Q, jedoch wird hier als erster Kontrollpunkt der letzte aus der direkt zuvor festgelegten quadratischen Bézier-Kurve verwendet.
R	Catmull-Rom	zeichnet vom aktuellen Punkt aus eine Catmull-Rom-Kurve. Aus SVG2 herausgefallen!
B	Bearing	gibt Winkelmaß für die weitere Verlaufsrichtung an Aus SVG2 herausgefallen!

SVG erlaubt verschiedene Schreibweisen für den Inhalt des d-Attributs:

• x- und y-Koordinaten können mit Leerzeichen oder wie bei Polygonen mit Komma getrennt angegeben werden. Es sind auch Kombinationen aus beliebig vielen Leerzeichen mit einem Komma möglich.
• Vor und hinter dem Kommando können sich beliebig viele (also auch keine) Leerzeichen befinden.
• Befehlsketten der Form L0 10 L50 20 L12 34 können in L0 10 50 20 12 34 umgewandelt werden, da Browser den letzten Befehl so lange auf die Punkte anwenden, bis sie einen neuen erhalten. Davon ausgenommen ist der MoveTo-Befehl, der als LineTo wiederholt wird.
• Die wissenschaftliche Exponentialnotation von Zahlen ist möglich. Statt 2000 kann man auch 2e3 (für 2·10³) schreiben. Die Zahl hinter dem e muss eine ganze Zahl sein.
• Auf die beiden Bogen-Flags (4. und 5. Parameter von A/a) muss jeweils kein Trennzeichen folgen, da sie genau ein Zeichen lang sind (0 oder 1).
• Bei Kommazahlen, bei denen vor dem Komma eine 0 steht, kann diese weggelassen werden (z. B. .5, -.5).
• Das Leerzeichen zwischen zwei Zahlen kann weggelassen werden, wenn die zweite Zahl negativ ist. Handelt es sich bei der ersten Zahl um eine Kommazahl oder eine Zahl in wissenschaftlicher Notation, gilt dies auch für Zahlen, die kleiner als 1 sind und bei denen die führende 0 weggelassen wird. M0.5 0.5 l-1.5 0.5 -1000 0.5 kann man auch m.5.5-1.5.5-1e3.5 schreiben.

Empfehlung: Für eine gute Lesbarkeit sollte man auf das Weglassen von Leerzeichen verzichten und Koordinatenpaare sollten durch ein dazwischenliegendes Komma hervorgehoben werden.