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?
Beachten Sie,dass …
- Kleinbuchstaben relative Angaben (ausgehend vom aktuellen Endpunkt),
- Großbuchstaben dagegen absolute Angaben (ausgehend von Ursprung des Koordinatensystems)
Empfehlung: Verwenden Sie Kommandos mit relativen Koordinaten. Wenn Sie Ihren Pfad später verschieben wollen, können Sie einfach den ursprünglichenmoveTo
-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.
Empfehlung: Für eine gute Lesbarkeit sollte man auf das Weglassen von Leerzeichen verzichten und Koordinatenpaare sollten durch ein dazwischenliegendes Komma hervorgehoben werden.Linien
MoveTo
Mit dem
MoveTo
-Befehl können Sie einen Ausgangspunkt festlegen.[2] Die erste Angabe in einemd
-Attribut muss ein MoveTo-Befehl sein, wobeim
alsM
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.
Beispiel ansehen …<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.
Beispiel ansehen …<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 verwendetenM
-Befehl erreicht haben. Somit spricht nichts gegen die Verwendung mehrererZ
-Befehle in einem Pfad. Die Groß- und Kleinschreibung des Befehls wird ignoriert.Beispiel ansehen …<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 obere Reihe besteht aus Pfaden, die nicht geschlossen sind. Trotzdem werden sie, wenn man eine Füllung festlegt, als Vielecke dargestellt. Nur der Rand umschließt die Vielecke nicht.
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 - rx,ry phi
- lf sf
- x,y
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
undsf = 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
Beispiel ansehen …<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
Beachten Sie:Es gibt keine Warnung, wenn es für die angegebenen Werte keine Möglichkeit für eine Ellipse und damit für einen Teil davon gibt. Darauf muss bei manueller Erstellung selbst geachtet werden. Das W3C-Konsortium sieht hier folgendes vor:
- 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").
Beachten Sie:Wenn Sie einen vollen 360°-Kreisbogen zeichnen wollen, können Sie für den Endpunkt (x,y) nicht die gleichen Werte nehmen wie die Startposition.
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" />
Das Zeichnen von Pfaden mit Bögen und Kurven ist nicht intuitiv und verlangt einige Übung. Verwenden Sie Pfad-Generatoren, die durch Klicken schnelle Ergebnisse ermöglichen:
- 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
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 erstellt Catmull-Rom-Spline-Kurven.[11]
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 ermöglicht eine Gradangabe, der der folgende Pfad-Befehl folgt.[12]
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" width="200px" height="200px" version="1.1" >
<g>
<g id="Layer1">
<path class="gelb"
d="M 141,195 C 164,189 178,173 178,136 C 178,87 150,85 111,74 C 106,73 86,67 82,64 C 81,62 81,60 81,59 C81,46 89,48 100,48 C 110,48 120,48 131,49
C 138,50 145,51 152,51 C 170,51 170,38 170,23 C 170,13 168,8 163,5 L183,5 C 199,5 195,10 195,169 L 195,183 C 195,189 189,195 183,195 L 141,195 Z"/>
<path class="blau"
d="M 37,195 L 16,195 C 10,195 5,189 5,183 L 5,16 C 5,10 10,5 16,5 L 61,5 C 39,11 24,26 24,62 C 24,75 27,91 37,100 C 55,117 114,125 119,130 C 121,133 120,137 120,140 C 120,150 114,150 105,150 C 92,150 79,149 66,148 C 59,147 51,145 44,145 C 30,145 28,156 28,167 L 28,174 C 28,186 28,192 37,195 Z" />
</g>
<g id="Linien">
<path d="M 111,74 L 150,84" class="linie"/>
<path d="M 178,174 L 178,87" class="linie"/>
<path d="M 141,195 L 165,189" class="linie"/>
<g id="Punkte_blau">
<path d="M 165,185 C 167,185 169,186 169,189 C 169,191 167,193 165,193 C 162,193 161,191 161,189 C 161,186 162,185 165,185 Z" class="pblau"/>
<path d="M 178,170 C 180,170 182,171 182,174 C 182,176 180,178 178,178 C 176,178 174,176 174,174 C 174,171 176,170 178,170 Z" class="pblau"/>
<path d="M 178,132 C 180,132 182,133 182,136 C 182,138 180,140 178,140 C 176,140 174,138 174,136 C 174,133 176,132 178,132 Z" class="pblau"/>
<path d="M 178,83 C 180,83 182,84 182,87 C 182,89 180,91 178,91 C 176,91 174,89 174,87 C 174,84 176,83 178,83 Z" class="pblau"/>
<path d="M 150,80 C 152,80 154,81 154,84 C 154,86 152,88 150,88 C 147,88 146,86 146,84 C 146,81 147,80 150,80 Z" class="pblau"/>
</g>
<g id="Punkte_weiss">
<path d="M 111,70 C 113,70 116,72 116,74 C 116,76 113,79 111,79 C 109,79 107,76 107,74 C 107,72 109,70 111,70 Z" class="quad"/>
<path d="M 82,59 C 84,59 87,61 87,63 C 87,65 84,68 82,68 C 80,68 78,65 78,63 C 78,61 80,59 82,59 Z" class="quad"/>
<path d="M 81,54 C 83,54 86,56 86,58 C 86,60 83,63 81,63 C 79,63 77,60 77,58 C 77,56 79,54 81,54 Z" class="quad"/>
<path d="M 99 44 C 101 44 104 46 104 48.5 C 104 50 101 53 99 53 C 97 53 95 50 95 48 C 95 46 97 44 99 44 Z" class="quad"/>
<path d="M 131,45 C 133,45 136,47 136,49 C 136,51 133,54 131,54 C 129,54 127,51 127,49 C 127,47 129,45 131,45 Z" class="quad"/>
<path d="M 151,47 C 153,47 156,49 156,51 C 156,53 153,56 151,56 C 149,56 147,53 147,51 C 147,49 149,47 151,47 Z" class="quad"/>
<path d="M 170,19 C 172,19 175,21 175,23 C 175,25 172,28 170,28 C 168,28 166,25 166,23 C 166,21 168,19 170,19 Z" class="quad"/>
</g>
<g id="Quadrate">
<rect x="137" y="191" width="8" height="8" class="quad"/>
<rect x="179" y="191" width="8" height="8" class="quad"/>
<rect x="191" y="179" width="8" height="8" class="quad"/>
<rect x="191" y="12" width="8" height="8" class="quad"/>
<rect x="179" y="1" width="8" height="8" class="quad"/>
<rect x="159" y="1" width="8" height="8" class="quad"/>
</g>
</g></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 markiert.
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
- ↑ 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.