SVG/Tutorials/Pfade
Neben den im vorigen Kapitel erwähnten Grundformen gibt es noch das Pfad-Objekt. Dieses besteht aus mehreren (Knoten)-Punkten, die durch Linien oder Bögen zu komplexen Formen verbunden werden. Pfade können offen oder geschlossen sein und dann gefüllt oder mit Randlinien versehen werden.
Dieses Tutorial erklärt die einzelnen Pfadkommandos, mit denen Sie beliebige Pfade zusammenstellen können.
Das path-Element ermöglicht es mit solchen Linien, Bögen und Kurven Pfad-Objekte als Grafik-Objekte, Animationsstrecken oder Maskenregionen zu erzeugen. Analog zu den Polygonen werden Punkte festgelegt[1], von denen dann bestimmte Pfadkommandos zeichnen.
Folgende Attribute sind möglich:
d
: (engl. data) Zeichenkette aus Kommandos und komma- oder leerzeichengetrennten KoordinatenpathLength
: Pfadlänge; Ausgangspunkt für weitere Berechnungen für Text entlang von Pfaden, animateMotion und stroke-Animationen
- Empfehlung: Sie können die Pfadlänge mit der JavaScript-Methode getTotalLength() ermitteln.
Alternativ können Sie solche Pfade als Parameter in einer path()-Funktion übergeben.
Inhaltsverzeichnis
Kommandos
absolut oder relativ?
- Kleinbuchstaben relative Angaben (ausgehend vom aktuellen Endpunkt),
- Großbuchstaben dagegen absolute Angaben (ausgehend von Ursprung des Koordinatensystems)
moveTo
-Befehl ändern.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. |
B |
Bearing | gibt Winkelmaß für die weitere Verlaufsrichtung an |
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 inL0 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 auch2e3
(für 2·103) schreiben. Die Zahl hinter deme
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
oder1
). - 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 auchm.5.5-1.5.5-1e3.5
schreiben.
Linien
MoveTo
Mit dem MoveTo
-Befehl können Sie einen Ausgangspunkt festlegen.[2] Die erste Angabe in einem d
-Attribut muss ein MoveTo-Befehl sein, wobei m
als M
interpretiert wird.
Schreibt man hinter einen MoveTo-Befehl mehr als einen Punkt, werden sie mit einer Linie verbunden, als ob man den LineTo-Befehl verwendet hätte. In dem Fall ist die Groß- und Kleinschreibung des MoveTo-Befehls auch dann relevant, wenn er der erste Befehl des d
-Attributs ist, weil die Groß- und Kleinschreibung auf den versteckten LineTo-Befehl übertragen wird.
Kommando | Name | Parameter | Beschreibung |
---|---|---|---|
M x,y |
moveTo | x,y-Koordinaten | setzt den aktuellen Punkt fest, von dem aus der Pfad starten soll. (Ausgangspunkt ist der Ursprung des Koordinatensystems) |
m x,y |
moveTo | x,y-Koordinaten | setzt den aktuellen Punkt fest, von dem aus der Pfad starten soll. (Ausgangspunkt ist die letzte festgelegte Koordinate bzw. im Falle von z als letztem Befehl die Koordinaten des letzten MoveTo-Befehls)
|
LineTo
Mit LineTo
können Sie nun Linien zeichnen.[3]
Kommando | Name | Parameter | Beschreibung |
---|---|---|---|
L x,y (absolut) |
LineTo | x,y-Koordinaten | zeichnet eine Linie vom aktuellen zum angegebenen Punkt. |
l x,y (relativ) |
LineTo | x,y-Koordinaten | zeichnet eine Linie vom aktuellen Punkt in diese Richtung. |
<svg>
<path d="M 50,50 H 100" stroke="green"/>
<path d="M 50,50 L 100,100" stroke="red"/>
<path d="M 50,50 V 100" stroke="yellow"/>
<path d="M 250,50 h 100" stroke="green"/>
<path d="M 250,50 l 100,100" stroke="red"/>
<path d="M 250,50 v 100" stroke="yellow"/>
</svg>
horizontale und vertikale Linien
Wenn Sie Linien nur waagerecht oder senkrecht führen wollen, können Sie die Befehle HorizontalLineto und VerticalLineTo verwenden.
Kommando | Name | Parameter | Beschreibung |
---|---|---|---|
H x (absolut) |
Horizontal LineTo | x-Koordinate (y bleibt gleich) |
zeichnet vom aktuellen Punkt aus eine horizontale Linie, die aber vom Ursprung ausgehend berechnet wird. |
h x (relativ) |
Horizontal LineTo | x-Koordinate (y bleibt gleich) |
zeichnet vom aktuellen Punkt aus eine horizontale Linie mit der angegebenen Länge. |
V y (absolut) |
Vertical LineTo | y-Koordinate (x bleibt gleich) |
zeichnet vom aktuellen Punkt aus eine vertikale Linie, die aber vom Ursprung ausgehend berechnet wird. |
v y (relativ) |
Vertical LineTo | y-Koordinate (x bleibt gleich) |
zeichnet vom aktuellen Punkt aus eine vertikale Linie mit der angegebenen Länge. |
<svg>
<path d="M 50,50 H 100" stroke="green" />
<path d="M 50,50 L 100,100" stroke="red" />
<path d="M 50,50 V 100" stroke="yellow" />
<path d="M 250,50 h 100" stroke="green" />
<path d="M 250,50 l 100,100" stroke="red" />
<path d="M 250,50 v 100" stroke="yellow" />
</svg>
Schließen von Formen
Mit dem closePath
-Befehl Z können Sie Pfade schließen, indem Sie den Pfad zu seinem Anfangspunkt zurückführen. Dieser Ausgangspunkt ist der Punkt, den Sie mit dem zuletzt verwendeten M
-Befehl erreicht haben. Somit spricht nichts gegen die Verwendung mehrerer Z
-Befehle in einem Pfad. Die Groß- und Kleinschreibung des Befehls wird ignoriert.
<svg>
<path d="M 10,110 l 40,-80 l 40,80" />
<path d="M 150,110 v -80 h 80 v 80" />
<path d="M 300,110 l -15,-50 l 40,-30 l 40,30 l -15,50" />
<path d="M 420,110 l -20,-40 l 20,-40 h 50 l 20,40 l -20,40" />
<path d="M 10,250 l 40,-80 l 40,80 Z" />
<path d="M 150,250 v -80 h 80 v 80 Z" />
<path d="M 300,250 l -15,-50 l 40,-30 l 40,30 l -15,50 Z" />
<path d="M 420,250 l -20,-40 l 20,-40 h 50 l 20,40 l -20,40 Z" />
</svg>
Die untere Reihe besteht aus Pfaden, die mit Z geschlossen wurden, sodass der Rand umlaufend ist.
elliptische Bögen
Mit dem Kommando A
, bzw. a
können Sie elliptische Bögen zeichnen. Wenn Sie gleiche Werte für die Radien nehmen, erzeugen Sie einen Kreisbogen. Darüber hinaus muss noch festgelegt werden, welcher der bei
gegebenen Radien und gegebener Achslage noch vier möglichen Bögen gezeichnet werden soll.
Kommando | Name | Parameter | Beschreibung |
---|---|---|---|
A rx,ry,phi lf sf x,y
|
elliptische Kurve |
|
zeichnet vom aktuellen Punkt aus einen elliptischen Bogen. Größe und Lage der dem Bogen zugrundeliegenden Ellipse werden durch die zwei Halbachsen[4] (rx, ry) und den Neigungswinkel phi der x-Achse festgelegt. Der Mittelpunkt (cx, cy) der Ellipse wird intern automatisch berechnet. lf=large-arc-flag und sf=sweep-flag legen die Richtung des Bogens fest. |
Folgende Angaben sind nötig:
- Der Bogen startet am (vorher festgelegten) aktuellen Punkt.
-
x, y
: Endpunkt -
rx, ry
: Radien (eigentlich: Halbachsen) -
phi
: Die +X-Halbachse der Ellipse wird durch phi relativ zum Koordinatensystem gedreht.
Mit diesen Angaben können vier verschiedene Bögen gezeichnet werden. lf = large-arc-flag
und sf = sweep-flag
legen daher die Richtung des Bogens fest[5]:
- Das
large-arc-flag
legt fest, ob- mit
large-arc-flag:1
ein größerer (mehr als 180 Grad) oder - mit
large-arc-flag:0
ein kleinerer Bogen (weniger als 180 Grad) gezeichnet wird.
- mit
- Das
sweep-flag
legt fest, ob- mit einem
sweep-flag:1
der Bogen mit einer positiven Richtung ("Rechtskurve") gezeichnet wird oder - mit einem
sweep-flag:0
der Bogen mit einer negativen Richtung ("Linkskurve") gezeichnet wird.
- mit einem
<path d="m 200,100 a 100,100 0 0 0 0,150" style="stroke:red;"/>
<path d="m 200,100 a 100,100 0 0 1 0,150" style="stroke:lime;"/>
<path d="m 200,100 a 100,100 0 1 0 0,150" style="stroke:blue;"/>
<path d="m 200,100 a 100,100 0 1 1 0,150" style="stroke:gold;"/>
Das Beispiel enthält 4 elliptische Bögen:
- alle Bögen haben
- jeweils den gleichen Wert
a 100,100 0
für die Radien rx und ry und den Drehwinkel phi von Null – beschreiben also einen Kreisbogen (bei dem phi bedeutungslos ist). - jeweils den gleichen Endpunkt 0,150 (also 150 Einheiten weiter unten)
- jeweils den gleichen Wert
- der blaue mit
1 0
(lf=1 und sf=0) für einen größeren mit negativer Richtung - der rote mit
0 0
(lf=0 und sf=0) einen kleineren mit negativer Richtung - der grüne mit
0 1
(lf=0 und sf=1) einen kleineren mit positiver Richtung - Der goldene mit
1 1
(lf=1 und sf=1) einen größeren mit positiver Richtung
- Startpunkt = Zielpunkt: Kommando wird ignoriert.
- Einer der Radien ist Null: Gerade Linie zum Zielpunkt.
- Negativer Radius: Minuszeichen wird ignoriert (Betragsfunktion).
- Ellipse zu klein, um den Zielpunkt zu erreichen: Ellipse wird proportional vergrößert, bis es genau eine Lösung gibt.
- Jeder von Null verschiedene Wert für Large-Arc-Flag oder Sweepflag wird als Eins interpretiert (Null = "Nein", sonst "Ja").
Verwenden Sie entweder - mit large-arc-flag=1 - einen Endpunkt nahe dem Startpunkt und schließen Sie den Pfad mit z, oder zeichnen sie zwei Teilkreise (z. B. Viertelkreis und Dreiviertelkreis) mit verschiedenen Long-arc-flags:
<path id="vollkreis" d="M 91,181 a 90,90,1 1 1 1,0 z" />
<path id="kreis" d="M 100,100 A 90,90,0 1 1 190,190 A 90,90,0 0 1 100,100 z" />
- SVG <path> builder Werte können über Eingabefelder und Checkboxen gesetzt werden.
- SVG Path Builder (Anthony Dugois) Punkte und Kontrollpunkte können mit der Maus gesetzt und verschoben werden
Das passende Pfad-Kommando wird ausgegeben.
Weitere Beispiele finden Sie in der MDN[6] und in der Spec.[7]
Bézier-Kurven
quadratische Bézier-Kurven
Mit dem Quadratic Bézier CurveTo
-Befehl Q können Sie quadratische Bézier-Kurven erstellen. Dies sind Kurven zwischen zwei Punkten, die durch einen Kontrollpunkt beeinflusst werden.[8]
Kommando | Name | Parameter | Beschreibung |
---|---|---|---|
Q (absolut)q (relativ) |
Quadratic Bézier CurveTo | (x1 y1 x y)+ | zeichnet eine quadratische Bézier-Kurve mit dem Kontrollpunkt (x1,y1). |
T (absolut)t (relativ) |
Shorthand/Smooth Quadratic Bézier CurveTo | (x y)+ | ähnlich dem Kommando Q, jedoch wird hier als Kontrollpunkt die Punktspiegelung des Kontrollpunktes aus der direkt zuvor festgelegten quadratischen Bézier-Kurve an deren Endpunkt verwendet (war der direkt vorhergehende Befehl keine quadratische Bézier-Kurve, wird der aktuelle Endpunkt als Kontrollpunkt verwendet, S ist dann identisch zu L ).
|
<path d="M50,200 q100,-100 200,0 t200,0 t200,0 t200,0"/>
In diesem Beispiel wird eine quadratische Bézier-Kurve mit dem Kommando q
gezeichnet und mit t 200,0
drei mal verlängert. Als Kontrollpunkt wird die Punktspiegelung des Kontrollpunktes aus der direkt zuvor festgelegten quadratischen Bézier-Kurve an deren Endpunkt verwendet. So entsteht eine regelmäßige Wellenlinie mit nur wenigen Kommandos.
<path id="eins" d="M 100,250 q 100,-200 200 0"/>
<path id="zwei" d="M 400,250 q 0,-200 200 0"/>
<path id="drei" d="M 100,550 q -90,-200 200 0"/>
<path id="vier" d="M 400,550 q 400,-500 200 0"/>
kubische Bézier-Kurven
Mit dem CurveTo
-Befehl können Sie kubische Bézier-Kurven erstellen. Dies sind Kurven zwischen zwei Punkten, die durch zwei Kontrollpunkte beeinflusst werden.[9]
Kommando | Name | Parameter | Beschreibung |
---|---|---|---|
C (absolut)c (relativ) |
CurveTo | (x1,y1 x2,y2 x,y) | zeichnet vom aktuellen Punkt aus eine kubische Bézier-Kurve zum Endpukt (x,y). Die Kurve benötigt 2 Kontrollpunkte (x1,y1) und (x2,y2). |
S (absolut)s (relativ) |
Shorthand/Smooth CurveTo | (x2,y2 x,y)+ | ähnlich dem Kommando C, jedoch wird hier als erster Kontrollpunkt die Punktspiegelung des letzten aus der direkt zuvor festgelegten kubischen Bézier-Kurve an deren Endpunkt verwendet (war der direkt vorhergehende Befehl keine kubische Bézier-Kurve, wird der aktuelle Endpunkt als Kontrollpunkt verwendet). |
<svg>
<path id="eins" d="M100,150 c100,-140 200,140 300,0"/>
<path id="zwei" d="M500,150 c0,-140 300,-140 300,0"/>
<path id="drei" d="M100,550 c200,-200 -90,-260 300,0"/>
<path id="vier" d="M500,550 c300,-250 -100,-260 300,0"/>
</svg>
Bei den Punkten Startpunkt A und Endpunkt D handelt es sich um den Start- und den Endpunkt der Kurve. Der Startpunkt wird im d-Attribut durch Mx,y
der Endpunkt durch die letzten beiden Koordinaten 400,150
beschrieben. Durch die hier zusätzlich eingezeichneten Kontroll- oder Ablenkungspunkte Kontrollpunkt B und Kontrollpunkt C wird die Richtung der Kurve bestimmt. Die Krümmung wird umso stärker, je weiter sich die Ablenkungspunkte von den Ursprungspunkten entfernen und schwächer, wenn sie sich ihnen nähern. Es sei darauf hingewiesen, dass die Kurve niemals durch diese beiden Punkte verlaufen kann.
<path d="M 100 150 C 200 10 300 290 400 150"/>
, in der alle Werte nur durch Leerzeichen getrennt sind.Weitere Beispiele finden Sie in der MDN[10].
Catmull-Rom-Kurven
Dieser Befehl war vorgesehen, um Catmull-Rom-Spline-Kurven[11] 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[12].
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. |
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.[13] 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.
|
<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>
Anwendungsbeispiele
Self-Logo
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 202 202">
<title>SELF-Logo under construction</title>
<defs>
<style type="text/css">
.gelb{
fill: #dfac20;
stroke-width: 1;
stroke: #337599;
}
.blau{
fill: #337599;
stroke: #337599;
}
#bezierkurven path {
stroke: #c82f04;
stroke-width: 1;
fill: none;
}
marker,
marker path {
fill: white;
stroke: #337599;
}
</style>
<marker id="markerAnfang" markerWidth="12" markerHeight="12" refX="6" refY="6">
<rect x="1" y="1" width="10" height="10" /> </marker>
<marker id="markerKreis" markerWidth="12" markerHeight="12" refX="6" refY="6">
<circle cx="6" cy="6" r="5" /> </marker>
<symbol id="point">
<circle cx="5" cy="5" r="4" style="fill:#c82f04; stroke: white;"/>
</symbol>
</defs>
<g id="Logo">
<path class="gelb" style="marker-start: url(#markerAnfang); marker-mid: url(#markerKreis); marker-end: url(#markerAnfang); "
d="M141,195 C164,189 178,173 178,136 C178,87 150,85 111,74 C106,73 86,67 82,64 C81,62 81,60 81,59 C81,46 89,48 100,48 C110,48 120,48 131,49
C138,50 145,51 152,51 C170,51 170,38 170,23 C170,13 168,8 163,5 L183,5 C199,5 195,10 195,169 L195,183 C195,189 189,195 183,195 L141,195 "/>
<path class="blau"
d="M37,195 L16,195 C10,195 5,189 5,183 L5,16 C5,10 10,5 16,5 L61,5 C39,11 24,26 24,62 C24,75 27,91 37,100 C55,117 114,125 119,130 C121,133
120,137 120,140 C120,150 114,150 105,150 C92,150 79,149 66,148 C59,147 51,145 44,145 C30,145 28,156 28,167 L28,174 C28,186 28,192 37,195Z" />
</g>
<g id="bezierkurven">
<path d="M115,75 L150,84" stroke="#c82f04"/>
<path d="M178,87 v88" stroke="#c82f04"/>
<path d="M145,194 L165,189" stroke="#c82f04"/>
<use xlink:href="#point" transform="translate(146,78)"/>
<use xlink:href="#point" transform="translate(173,81)"/>
<use xlink:href="#point" transform="translate(173,131)"/>
<use xlink:href="#point" transform="translate(173,171)"/>
<use xlink:href="#point" transform="translate(160,184)"/>
</g>
</svg>
In diesem Beispiel ist das SelfHTML-Logo als Vektorgrafik erstellt worden. Um zu verdeutlichen, wie die Pfade angelegt sind, wurden Start- und Kontrollpunkte der Kurven mit Markierungen gekennzeichnet
.
Siehe auch
Es gibt viele Anwendungsmöglichkeiten für Pfade:
- SVG/Tutorials/Shape-Morphing
- animateMotion (Objekte entlang von Pfaden animieren)
- textPath (Text an Pfaden ausrichten)
CSS
- path()-Funktion für:
- CSS/Tutorials/Masken und Beschneidungen/clip-path path()-Funktion für Beschneidungen
- CSS/Tutorials/Animation/offset#offset-path Animation entlang von Pfaden
Quellen
- ↑ w3.org: SVG Paths vom 08.07.2015
- ↑ w3.org: PathDataMovetoCommands
- ↑ w3.org: PathDataLinetoCommands
- ↑ Für mathematische Details siehe "Ellipse" in der dt. Wikipedia.
- ↑ w3.org: PathDataEllipticalArcCommands
- ↑ MDN: SVG/Tutorial/Paths#Arcs
- ↑ W3c: 4.7. The elliptical arc curve commands
- ↑ w3.org: PathDataQuadraticBezierCommands
- ↑ w3.org: PathDataCubicBezierCommands
- ↑ MDN: SVG/Tutorial/Paths#Bezier_Curves
- ↑ w3.org: 4.8. The Catmull-Rom curve commands vom 08.07.2015
- ↑ github: Catmull-Rom Spline to Bezier Spline Converter
- ↑ w3.org: 4.9. The bearing commands vom 08.07.2015
Generatoren und Visualizer
- SVG Path Visualizer 📐
visualisiert und erklärt die einzelnen Bestandteile eines beliebigen d-Attributs
m 100,100
würde sowohl denH 100
- als auch denV 100
-Befehl völlig aufheben.