SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

SVG/Element/path

Aus SELFHTML-Wiki
< SVG‎ | Element(Weitergeleitet von Path)
Wechseln zu: Navigation, Suche

Das path-Element ist eine Grundform (basic shape), erzeugt aber komplexe Formen, Animationsstrecken oder Maskenregionen.

Syntax
Start-Tag: notwendig
End-Tag: ggf. notwendig
Elternelemente
Darf vorkommen in:
jedem Element, das fließenden Inhalt erlaubt.
erlaubte Inhalte
animate, animateMotion, animateTransform, set, title
Attribute
Name Inhalt Standardwert Bedeutung
d CDATA Koordinaten des Pfades
pathLength NUMBER Pfadlänge
systemLanguage IANA
transform CDATA

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel 
<path d="M  10,110 L 40,-80 L 40,80" />
<path d="M150,110 v-80 h80 v80" />
<path d="M300,110 l-15,-50 l40,-30 l40,30 l-15,50" />
<path d="M 50,100 q100,-100 200,0 t200,0 t200,0 t200,0">
   <title>Sinuskurve</title>
</path>
Die ersten 3 Pfade werden als inhaltsleeres Element notiert. Im d-Attribut sind verschiedene Pfadkommandos enthalten.
Der letzte Pfad enthält ein title-Element als Kindelement, das bei :hover angezeigt wird. Deshalb erhält der Pfad einen hier obligatorischen End-Tag.
Beachten Sie: , dass …
  • Kleinbuchstaben relative Angaben (ausgehend vom aktuellen Endpunkt),
  • Großbuchstaben dagegen absolute Angaben (ausgehend von Ursprung des Koordinatensystems)
definieren.
Empfehlung: Verwenden Sie Kommandos mit relativen Koordinaten. Wenn Sie Ihren Pfad später verschieben wollen, können Sie einfach den ursprünglichen moveTo-Befehl ändern.

Pfadkommandos - die beste Schreibweise?
Im der Spec werden verschiedene Schreibweisen genannt. Es ist möglich zwischen Pfadkommando und Werten, sowie den beiden Koordinaten ein Leerzeichen zu notieren (oder dies bei negativen Werten wegzulassen). Bei umfangreicheren Pfaden verliert man so schnell die Zuordnung. [1]
Dieser Beispiel-Pfad aus der Spec zeigt die von uns bevorzugte Schreibweise[2]:

<path class="SamplePath" d="M100,200 C100,100 250,100 250,200 S400,300 400,200" />

Kein Leerzeichen zwischen Kommando und Koordinaten; Koordinaten durch ein Komma getrennt, damit die Zuordnung klar ist.

Siehe auch

Weblinks

  1. ↑ WHATWG: General information about path data
  2. ↑ WHATWG: The cubic Bézier curve commands
Grundformen

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.

Catmull-Rom-Kurven

Dieser Befehl war vorgesehen, um Catmull-Rom-Spline-Kurven[1] zu erstellen. Er wurde aber von keinem Browser implementiert. Es gibt eine experimentelle Library von Doug Schepers, die eine Catmull-Rom Interpolation durchführt und mit Bezier-Kurven darstellt[2].


Kommando Name Parameter Beschreibung
R (absolut)
r (relativ)		 Catmull-Rom x1 y1 x2 y2 (x y)+ zeichnet vom aktuellen Punkt aus eine Catmull-Rom-Kurve.

Die Kurve startet von (x1, y1), verläuft durch alle folgenden Punkte bis zum vorletzten angegebenen Punkt. Der Punkt vor dem R-Befehl stellt den ersten Kontrollpunkt dar und kontrolliert den Tangens von (x1, y1). Der Endpunkt des Befehls liefert den finalen Kontrollpunkt und bestimmt den Tangens der Kuve, die durch den vorletzten Punkt der Kurve verläuft. R (uppercase) zeigt an, dass absolute Koordinaten folgen; r (lowercase) zeigt an, dass relative Koordinaten folgen.

Gradangaben mit Bearing

Der bearing-Befehl soll es ermöglichen, für nachfolgende Pfad-Befehle einen Winkel vorzugeben, um den das Ergebnis dieses Befehls gedreht wird.[3] Damit werden aufwändige Koordinatenberechnungen oder nachgelagerte Transformationen überflüssig.

Der Bearing-Befehl wurde bisher von keinem Browser implementiert und ist aus der SVG2-Spezifikation wieder entfernt worden - woraufhin die diversen Browser-Tickets, die diesen Befehl forderten, auf won't fix gesetzt wurden.


Kommando Name Parameter Beschreibung
B (absolut)
b (relativ)		 bearing Winkel+ legt ein Winkelmaß in Grad fest. 0 entspricht der Richtung der positiven X-Achse.

B (uppercase) legt das absolute Winkelmaß fest; b (lowercase) legt das Winkelmaß in Bezug auf den Tangens des vorhergehenden Pfads fest.

Beispiel ansehen …
<svg>
  <path fill="#dfac20" stroke="#3983ab" stroke-width="1"
        d="M 150,10
           B 36 h 47
           b 72 h 47
           b 72 h 47
           b 72 h 47 z"/>
</svg>
  1. ↑ w3.org: 4.8. The Catmull-Rom curve commands vom 08.07.2015
  2. ↑ github: Catmull-Rom Spline to Bezier Spline Converter
  3. ↑ w3.org: 4.9. The bearing commands vom 08.07.2015
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Element/path&oldid=98148“