Ijs2019medienpartner.jpg

SELFHTML ist in diesem Jahr Medienpartner der IJC.

Für die Konferenz vom 21. – 25. Oktober 2019 in München verlosen wir ein Freiticket.

Weitere Informationen finden sich im SELFHTML-Forum.

SVG/Elemente/Pfade

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

Das path-Element erzeugt komplexe Formen, Animationsstrecken oder Maskenregionen. Analog zu den Polygonen werden Punkte festgelegt.[1] Diese Punkte sind Ausgangspunkt für Linien, aber auch für Bögen oder Kurven, sodass komplexe geometrische Objekte möglich sind.

  • SVG 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Folgende Attribute sind möglich:

Empfehlung: Sie können die Pfadlänge mit der JavaScript-Methode getTotalLength() ermitteln.

Übersicht[Bearbeiten]

Kommando Name Beschreibung
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·103) schreiben. Die Zahl hinter dem e muss eine ganze Zahl sein.
  • 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 könnte man auch m.5.5-1.5.5-1e3.5 schreiben, der Lesbarkeit ist dies jedoch nicht zuträglich.

absolut oder relativ[Bearbeiten]

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.

Kommandos[Bearbeiten]

Linien[Bearbeiten]

MoveTo[Bearbeiten]

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 moveTo x,y-Koordinaten setzt den aktuellen Punkt fest, von dem aus der Pfad starten soll. (Ausgangspunkt ist der Ursprung des Koordinatensystems)
m 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[Bearbeiten]

Mit LineTo können Sie nun Linien zeichnen.[3]

Kommando Name Parameter Beschreibung
L (absolut) LineTo x,y-Koordinaten zeichnet eine Linie vom aktuellen zum angegebenen Punkt.
l (relativ) LineTo x,y-Koordinaten zeichnet eine Linie vom aktuellen Punkt in diese Richtung.


Beispiel ansehen …
<svg>
  <path d="M50,50 H100" stroke="green"/>
  <path d="M50,50 L100,100" stroke="red"/>
  <path d="M50,50 V100" stroke="yellow"/>

  <path d="M250,50 h100" stroke="green"/>
  <path d="M250,50 l100,100" stroke="red"/>
  <path d="M250,50 v100" 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 m100,100 würde sowohl den H100- als auch den V100-Befehl völlig aufheben.
ansehen …

horizontale und vertikale Linien[Bearbeiten]

Wenn Sie Linien nur waagerecht oder senkrecht führen wollen, können Sie die Befehle HorizontalLineto und VerticalLineTo verwenden.


Kommando Name Parameter Beschreibung
H (absolut) Horizontal LineTo x-Koordinate
(y bleibt gleich)		 zeichnet vom aktuellen Punkt aus eine horizontale Linie zum angegebenen Punkt.
h (relativ) Horizontal LineTo x-Koordinate
(y bleibt gleich)		 zeichnet vom aktuellen Punkt aus eine horizontale Linie mit der angegebenen Länge.
V (absolut) Vertical LineTo y-Koordinate
(x bleibt gleich)		 zeichnet vom aktuellen Punkt aus eine vertikale Linie zum angegebenen Punkt.
v (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="M50,50 H100" stroke="green"/>
  <path d="M50,50 L100,100" stroke="red"/>
  <path d="M50,50 V100" stroke="yellow"/>

  <path d="M250,50 h100" stroke="green"/>
  <path d="M250,50 l100,100" stroke="red"/>
  <path d="M250,50 v100" stroke="yellow"/>
</svg>
ansehen …

Schließen von Formen[Bearbeiten]

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="M10,110 l40,-80 l40,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="M420,110 l-20,-40 l20,-40 h50 l20,40 l-20,40"/>
	
  <path d="M10,250 l40,-80 l40,80 Z"/>
  <path d="M150,250 v-80 h80 v80 Z"/>
  <path d="M300,250 l-15,-50 l40,-30 l40,30 l-15,50 Z"/>
  <path d="M420,250 l-20,-40 l20,-40 h50 l20,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, so dass der Rand umlaufend ist.
ansehen …

elliptische Bögen[Bearbeiten]

Mit dem Kommando A, bzw. a können Sie elliptische Bögen zeichnen. Wenn Sie gleiche Werte für die Radien rx, ry nehmen, erzeugen Sie einen Kreisbogen.

Kommando Name Parameter Beschreibung
A (absolut)
a (relativ) 		elliptische Kurve (rx ry x-Achsen-Rotation large-arc-flag sweep-flag x y) zeichnet vom aktuellen Punkt aus einen elliptischen Bogen

Größe und Richtung des Bogens werden durch die zwei Radien (rx, ry) und die x-Achsen-Rotation festgelegt.
Der Mittelpunkt (cx, cy) der Ellipse wird durch die anderen Parameter festgelegt und automatisch berechnet.
large-arc-flag und sweep-flag legen die Richtung des Kreisbogens fest.

Folgende Angaben sind nötig:

  • Der Bogen startet am (vorher festgelegten) Anfangspunkt
  • x, y: Endpunkt
  • rx, ry: Radien (gleiche Werte: Kreisbogen; unterschiedliche Werte: Ellipsen)
  • x-Achsen-Rotation: x-Achse der Ellipse wird durch x-Achsen-Rotation relativ zum Koordinatensystem gedreht.

Mit diesen Angaben können vier verschiedene Bögen gezeichnet werden. large-arc-flag and sweep-flag legen die Richtung der Bögen fest:[4]

  • 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 mit weniger als 180 Grad gezeichnet wird.
  • sweep-flag:
    • mit einem sweep-flag:1 wird der Bogen mit einer positiven Richtung gezeichnet
    • mit einem sweep-flag:0 wird der Bogen mit einer negativen Richtung gezeichnet


Beispiel ansehen …
<svg>
  <path d="m100,100 a90,90 0 0,1 90,90" stroke="#c32e04" />
  <path d="m100,100 a90,90 0 1,1 90,90" stroke="#dfac20" />
  <path d="m100,100 a90,90 0 0,0 90,90" stroke="#5a9900" />
  <path d="m100,100 a90,90 0 1,0 90,90" stroke="#3983ab" />

  <path d="M500,200 a100,100 0 1,0 100,100" stroke="#c32e04"/>
  <path d="M500,200 a50,50 0 0,1 100,100" stroke="#dfac20"/>
  <path d="M500,200 a50,240 0 0,1 100,100" stroke="#8983ab"/>
</svg>
ansehen …


Beispiel ansehen …
<svg viewbox="0 0 800 300">
  <g id="richtungen"
    <path d="M250,150 a100,100 0 0,0 -100,-100" stroke="#3983ab"/>
    <path d="M250,150 a100,100 0 0,1 100,-100" stroke="#dfac20"/>
    <path d="M250,150 a100,100 0 0,0  100,-100" stroke="#5a9900"/>
    <path d="M250,150 a100,100 1 0,1 100,100" stroke="#c32e04"/>
    <path d="M250,150 a100,100 0 0,0 100,100" stroke="#3983ab"/>	
    <path d="M250,150 a100,100 0 0,1 -100,100" stroke="#dfac20"/>
    <path d="M250,150 a100,100 0 0,0 -100,100" stroke="#5a9900"/>
    <path d="M250,150 a100,100 1 0,1 -100,-100" stroke="#c32e04"/>
   </g>
	
   <g id="schienenkreis">
     <circle cx="650" cy="150" r="100" stroke="black" stroke-width="1" fill="none"/>
     <path d="M550,150 a100,100 0 0,1 30,-70" stroke="#dfac20"/>
     <path d="M580,80 a100,100 0 0,1 70,-30" stroke="#3983ab"/>
     <path d="M650,50 a100,100 0 0,1 38,7" stroke="#dfac20"/>
     <path d="M688,57 a100,100 0 0,1 32,23" stroke="#5a9900"/>
     <path d="M720,80 a100,100 0 0,1 30,70" stroke="#c32e04"/>
   </g>
</svg>
In diesem Beispiel sehen Sie, wie die 90-Grad-Kurven in verschiedene Richtungen gehen.
Im rechten Beispiel bestehen die Kurven aus 45 und 22.5 Grad-Abschnitten.
ansehen …
Beachten Sie: Wenn Sie einen vollen 360°-Kreisbogen zeichnen wollen, können Sie den Endpunkt (x,y) nicht mit den Werten 0,0 verwenden.

Verwenden Sie die Werte (0,1) oder 1,0) und schließen Sie den Pfad mit z:

<path id="vollkreis" d="M91,181 a 90,90 1 1,1 1,0 z"/>


Weitere Beispiele finden Sie in der MDN[5]

Bézier-Kurven[Bearbeiten]

quadratische Bézier-Kurven[Bearbeiten]

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. [6]

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).
Beispiel ansehen …
<svg>
    <path id="eins" d="M100,250 q100,-200 200 0"/>
    <path id="zwei" d="M400,250 q0,-200 200 0"/>
    <path id="drei" d="M100,550 q-90,-200 200 0"/>
    <path id="vier" d="M400,550 q400,-500 200 0"/>
</svg>
ansehen …

kubische Bézier-Kurven[Bearbeiten]

Mit dem CurveTo-Befehl können Sie kubische Bézier-Kurven erstellen. Dies sind Kurven zwischen zwei Punkten, die durch zwei Kontrollpunkte beeinflusst werden. [7]

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[8].

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

Catmull-Rom-Kurven[Bearbeiten]

Dieser Befehl erstellt Catmull-Rom-Spline-Kurven.[9]

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
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[Bearbeiten]

Der bearing-Befehl ermöglicht eine Gradangabe, der der folgende Pfad-Befehl folgt.[10]

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
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[Bearbeiten]

[Bearbeiten]

Beispiel ansehen …
<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="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 Z"/>
    <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="Linien">
    <path d="M111,74 L150,84" class="linie"/>
    <path d="M178,174 L178,87" class="linie"/>
    <path d="M141,195 L165,189" class="linie"/>
    <g id="Punkte_blau">
      <path d="M165,185 C167,185 169,186 169,189 C169,191 167,193 165,193 C162,193 161,191 161,189 C161,186 162,185 165,185Z" class="pblau"/>
      <path d="M178,170 C180,170 182,171 182,174 C182,176 180,178 178,178 C176,178 174,176 174,174 C174,171 176,170 178,170Z" class="pblau"/>
      <path d="M178,132 C180,132 182,133 182,136 C182,138 180,140 178,140 C176,140 174,138 174,136 C174,133 176,132 178,132Z" class="pblau"/>
      <path d="M178,83 C180,83 182,84 182,87 C182,89 180,91 178,91 C176,91 174,89 174,87 C174,84 176,83 178,83Z" class="pblau"/>
      <path d="M150,80 C152,80 154,81 154,84 C154,86 152,88 150,88 C147,88 146,86 146,84 C146,81 147,80 150,80Z" class="pblau"/>
    </g>
   <g id="Punkte_weiss">
      <path d="M111,70 C113,70 116,72 116,74 C116,76 113,79 111,79 C109,79 107,76 107,74 C107,72 109,70 111,70Z" class="quad"/>
      <path d="M82,59 C84,59 87,61 87,63 C87,65 84,68 82,68 C80,68 78,65 78,63 C78,61 80,59 82,59Z" class="quad"/>
      <path d="M81,54 C83,54 86,56 86,58 C86,60 83,63 81,63 C79,63 77,60 77,58 C77,56 79,54 81,54Z" class="quad"/>
      <path d="M99 44C101 44 104 46 104 48.5 C104 50 101 53 99 53C97 53 95 50 95 48C95 46 97 44 99 44Z" class="quad"/>
      <path d="M131,45 C133,45 136,47 136,49 C136,51 133,54 131,54 C129,54 127,51 127,49 C127,47 129,45 131,45Z" class="quad"/>
      <path d="M151,47 C153,47 156,49 156,51 C156,53 153,56 151,56 C149,56 147,53 147,51 C147,49 149,47 151,47Z" class="quad"/>
      <path d="M170,19 C172,19 175,21 175,23 C175,25 172,28 170,28 C168,28 166,25 166,23 C166,21 168,19 170,19Z" 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>
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 markiert.

Quellen[Bearbeiten]

  1. ↑ w3.org: SVG Paths vom 08.07.2015
  2. ↑ w3.org: PathDataMovetoCommands
  3. ↑ w3.org: PathDataLinetoCommands
  4. ↑ w3.org: PathDataEllipticalArcCommands
  5. ↑ MDN: SVG/Tutorial/Paths#Arcs
  6. ↑ w3.org: PathDataQuadraticBezierCommands
  7. ↑ w3.org: PathDataCubicBezierCommands
  8. ↑ MDN: SVG/Tutorial/Paths#Bezier_Curves
  9. ↑ w3.org: 4.8. The Catmull-Rom curve commands vom 08.07.2015
  10. ↑ w3.org: 4.9. The bearing commands vom 08.07.2015

Referenz[Bearbeiten]

Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Elemente/Pfade&oldid=64044“