SVG/Tutorials/Pfade

Der Begriff path ist mehrdeutig.
Path (englisch für Pfad) bezeichnet auch einen Dateipfad eines URI.

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 Koordinaten
pathLength: 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.

Kommandos

absolut oder relativ?

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.

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

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.

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>

Wie Sie bei der linken Liniengruppe sehen können, führen die absoluten Befehle L, H und V zu unerwarteten Ergebnissen. Die Linien führen zu den absoluten Koordinaten, sodass die Linien hier viel kürzer sind. Eine Verschiebung des Startpunktes mit m 100,100 würde sowohl den H 100- als auch den V 100-Befehl völlig aufheben.

ansehen …

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>

ansehen …

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.

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.

ansehen …

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.

Die vier Möglichkeiten, bei gleichem Wert für rx, ry, phi, x und y einen Bogen vom oberen zum unteren Punkt zu zeichnen:
rot: lf=0 und sf=0;
grün: lf=0 und sf=1;
blau: lf=1 und sf=0;
gold: lf=1 und sf=1;

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

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;"/>

ansehen …

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)
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" />

Hinweis:

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

Bogen-Generator für arc-Command ansehen …

Empfehlung: Öffnen Sie den Bogen-Generator in einem neuen Tab und erzeugen Sie mit Drag & Drop den gewünschten Bogen.
Das passende Pfad-Kommando wird ausgegeben.

ansehen …

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`).

quadratische Bézier-Kurven mit q und t ansehen …

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

ansehen …

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.

einige quadratische Bézier-Kurven ansehen …

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

ansehen …

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

Beispiel ansehen …

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

ansehen …

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.

Beachten Sie: In den hier verwendeten Codebeispielen wurden die einzelnen Werte durch Kommata zu Koordinaten formatiert. Ebenso richtig wäre die Darstellung <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].

Empfehlung: Verwenden Sie zum Erstellen komplexer Pfade einen SVG-Editor, der Ihnen viel Arbeit abnehmen kann.

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. `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.^[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. `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>

ansehen …

Anwendungsbeispiele

Self-Logo

Beispiel ansehen …

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

ansehen …

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)
- SVG/Tutorials/Text/animierte Textpfade

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

[1] w3.org: SVG Paths vom 08.07.2015

[2] w3.org: PathDataMovetoCommands

[3] w3.org: PathDataLinetoCommands

[WP_Ellipse-4] Für mathematische Details siehe "Ellipse" in der dt. Wikipedia.

[5] w3.org: PathDataEllipticalArcCommands

[6] MDN: SVG/Tutorial/Paths#Arcs

[7] W3c: 4.7. The elliptical arc curve commands

[8] w3.org: PathDataQuadraticBezierCommands

[9] w3.org: PathDataCubicBezierCommands

[10] MDN: SVG/Tutorial/Paths#Bezier_Curves

[11] w3.org: 4.8. The Catmull-Rom curve commands vom 08.07.2015

[12] thub: Catmull-Rom Spline to Bezier Spline Converter

[13] w3.org: 4.9. The bearing commands vom 08.07.2015

[1

[2

[3

[4

[5

[6

[7

[8

[9

[10

[11

[12

[13

SVG/Tutorials/Pfade

Inhaltsverzeichnis

Kommandos

Linien

MoveTo

LineTo

horizontale und vertikale Linien

Schließen von Formen

elliptische Bögen

Bézier-Kurven

quadratische Bézier-Kurven

kubische Bézier-Kurven

Catmull-Rom-Kurven

Gradangaben mit Bearing

Anwendungsbeispiele

Self-Logo

Siehe auch

Quellen

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Mitmachen

Werkzeuge

SELFHTML