SVG/Attribut/d

Aus SELFHTML-Wiki
< SVG‎ | Attribut
Wechseln zu: Navigation, Suche

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
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

Weblinks

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·103) 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.