W3docs
de
Anmelden

SVG Path

Lernen Sie das SVG-<path>-Element und die Befehle seines d-Attributs: moveto, lineto, kubische und quadratische Kurven, Bögen und closepath.

Das SVG-Element <path> ist die leistungsstärkste und flexibelste Form in SVG. Fast jede andere SVG-Form — Linien, Polygone und Kurven — lässt sich mit einem <path> nachbilden. Diese Seite erklärt das einzige Attribut, das die gesamte Arbeit erledigt: das Attribut d. Dabei werden alle unterstützten Zeichenbefehle mit ihren Parametern und ausführbaren Beispielen vorgestellt.

Beschreibung des <path>-Elements

Das SVG-Element <path> definiert einen Pfad: eine Folge von Zeichenbefehlen, die einen imaginären „Stift" über die Zeichenfläche bewegen, um Linien, Kurven und Bögen zu zeichnen.

Pfade werden verwendet, um komplexe Formen durch die Kombination mehrerer gerader oder gekrümmter Segmente zu erstellen. Komplexe Formen, die nur aus geraden Linien bestehen, können auch als Polylinien erstellt werden, aber im Gegensatz zu einer Polylinie kann ein Pfad echte Kurven zeichnen und benötigt daher keine vielen winzigen Liniensegmente, um eine Kurve zu simulieren.

In SVG beginnt das Koordinatensystem in der oberen linken Ecke: x wächst nach rechts und y wächst nach unten. Beachten Sie dies — ein größerer y-Wert liegt auf dem Bildschirm weiter unten, nicht weiter oben.

Die Form eines Pfades wird vollständig durch das Attribut d („data") definiert. Der Wert von d ist eine Zeichenkette aus einbuchstabigen Befehlen, auf die jeweils die Zahlen (Parameter) folgen, die dieser Befehl benötigt.

Befehle des d-Attributs

Jeder Befehl besteht aus einem einzelnen Buchstaben gefolgt von seinen Parametern. Die verfügbaren Befehle sind:

BefehlNameParameter
M / mmovetox y
L / llinetox y
H / hhorizontal linetox
V / vvertical linetoy
C / ccubic Bézier curvetox1 y1 x2 y2 x y
S / ssmooth cubic Bézier curvetox2 y2 x y
Q / qquadratic Bézier curvetox1 y1 x y
T / tsmooth quadratic Bézier curvetox y
A / aelliptical arcrx ry x-axis-rotation large-arc-flag sweep-flag x y
Z / zclosepath(keine)

Absolute und relative Befehle

Jeder Befehl existiert in zwei Varianten. Großbuchstaben verwenden absolute Koordinaten — jedes x y wird vom SVG-Ursprung oben links (0, 0) aus gemessen. Kleinbuchstaben verwenden relative Koordinaten — jeder Wert ist ein Versatz von der aktuellen Stiftposition (wo der vorherige Befehl geendet hat).

Die beiden folgenden Pfade zeichnen dasselbe Dreieck. Der erste verwendet absolute Befehle, der zweite relative:

<!-- Absolute: every point measured from (0,0) -->
<path d="M 100 50 L 200 50 L 150 150 Z" fill="orange" />

<!-- Relative: every point is an offset from the previous point -->
<path d="M 100 50 l 100 0 l -50 100 Z" fill="orange" />

Der relative Pfad gelesen: Start bei (100, 50), dann +100, 0 (nach 200, 50), dann -50, +100 (nach 150, 150), dann schließt z wieder zum Startpunkt. Relative Befehle sind praktisch, wenn man eine ganze Form verschieben möchte — es genügt, nur das erste M zu ändern, und der Rest folgt automatisch.

MoveTo, Linien und Schließen (M, L, H, V, Z)

  • M x y hebt den Stift ab und bewegt ihn zu (x, y), ohne zu zeichnen. Jeder Pfad muss mit einem moveto beginnen.
  • L x y zeichnet eine gerade Linie vom aktuellen Punkt zu (x, y).
  • H x zeichnet eine horizontale Linie zur x-Koordinate x (y bleibt gleich). Eine Kurzform für ein horizontales L.
  • V y zeichnet eine vertikale Linie zur y-Koordinate y (x bleibt gleich).
  • Z schließt den Pfad, indem eine gerade Linie zurück zum zuletzt gesetzten M-Punkt gezeichnet wird.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="250">
      <path d="M190 40 L115 240 L265 240 Z" fill="lightblue" stroke="navy" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>
Probier es selbst »

Das Attribut fill füllt das Innere der Form, während stroke die Kontur zeichnet. Weitere Optionen für Konturen (Breite, Strichelung, Linienenden) finden Sie unter SVG Stroking.

Kubische Bézier-Kurven (C und S)

Eine kubische Bézier-Kurve biegt ein Segment mithilfe zweier Kontrollpunkte. C x1 y1 x2 y2 x y zeichnet eine Kurve vom aktuellen Punkt zu (x, y); (x1, y1) ist der Kontrollpunkt für den Anfang und (x2, y2) ist der Kontrollpunkt für das Ende. Die Kurve wird zu jedem Kontrollpunkt hin „gezogen".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 C20 20, 280 20, 280 150"
            fill="none" stroke="purple" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Hier startet der Stift bei (20, 150), und die beiden Kontrollpunkte (20, 20) und (280, 20) ziehen die Kurve nach oben zu einem gleichmäßigen Bogen, der bei (280, 150) endet. Durch fill="none" bleibt es eine offene Kurve, ohne den darunter liegenden Bereich zu füllen.

Die glatte Variante S x2 y2 x y setzt eine vorherige C- (oder S-) Kurve nahtlos fort: Sie hat nur einen Kontrollpunkt, da der erste automatisch aus dem abschließenden Kontrollpunkt des vorherigen Befehls gespiegelt wird. Das macht es einfach, Kurven zu einer kontinuierlichen Welle zu verketten.

Quadratische Bézier-Kurven (Q und T)

Eine quadratische Bézier-Kurve ist einfacher — sie verwendet nur einen Kontrollpunkt. Q x1 y1 x y zeichnet eine Kurve vom aktuellen Punkt zu (x, y), die zum einzelnen Kontrollpunkt (x1, y1) hin gebogen wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <path d="M20 150 Q150 20 280 150"
            fill="none" stroke="green" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Der einzelne Kontrollpunkt (150, 20) liegt oberhalb des Mittelpunkts und zieht die Linie zu einem symmetrischen Buckel. Die glatte Variante T x y setzt eine vorherige Q/T-Kurve fort, indem sie deren Kontrollpunkt automatisch spiegelt — man muss nur den neuen Endpunkt angeben.

Elliptische Bögen (A)

Der Bogen-Befehl zeichnet einen Abschnitt einer Ellipse. Er nimmt sieben Parameter:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  • rx, ry — der horizontale und vertikale Radius der Ellipse.
  • x-axis-rotation — Rotation der Ellipse in Grad.
  • large-arc-flag — 0 für den kleineren Bogen, 1 für den größeren Bogen zwischen den beiden Punkten.
  • sweep-flag — 0 für einen Bogen gegen den Uhrzeigersinn (negativer Winkel), 1 für einen Bogen im Uhrzeigersinn (positiver Winkel).
  • x, y — der Endpunkt des Bogens.

Da zwei Punkte auf einer Ellipse durch vier mögliche Bögen verbunden werden können, wählen die beiden Flags aus, welcher gezeichnet wird.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="200">
      <!-- Same start and end point, different flag combinations -->
      <path d="M60 150 A60 60 0 0 1 180 150"
            fill="none" stroke="crimson" stroke-width="3" />
      <path d="M60 150 A60 60 0 1 0 180 150"
            fill="none" stroke="teal" stroke-width="3" />
      Sorry, inline SVG is not supported by your browser..
    </svg>
  </body>
</html>

Beide Bögen teilen dieselben Radien (60 60) sowie denselben Start- (60, 150) und Endpunkt (180, 150). Der rote Pfad verwendet large-arc-flag 0, sweep-flag 1, um den kurzen Bogen oberhalb der Linie zu zeichnen; der blaugrüne Pfad verwendet large-arc-flag 1, sweep-flag 0, um den großen Bogen in die andere Richtung zu zeichnen. Das Ändern der Flags ist der einfachste Weg, um das Verhalten von A zu verstehen.

Tipps

  • Ein Pfad beginnt immer mit einem moveto. Ohne ein einleitendes M/m wird der Pfad nicht gerendert.
  • Zahlen können durch Leerzeichen oder Kommas getrennt werden — L 100 50 und L100,50 sind äquivalent.
  • Wiederholte identische Befehle können weggelassen werden: M10 10 L20 20 L30 30 kann als M10 10 L20 20 30 30 geschrieben werden.
  • Komplexe Pfade von Hand zu schreiben ist fehleranfällig; ein Vektoreditor, der SVG exportiert, ist in der Regel der bessere Arbeitsablauf, aber das Verstehen der Befehle ermöglicht es, die Ausgabe zu lesen und zu korrigieren.

Verwandte Seiten

  • SVG Reference — eine übersichtliche Liste aller SVG-Elemente und Attribute.
  • SVG Stroking — Breite, Farbe und Strichelung von Konturen steuern.
  • SVG Line — ein einzelnes gerades Linienelement zeichnen.
  • SVG Polygon — geschlossene Formen aus einer Liste von Punkten zeichnen.

Übung

Übung
Welche der folgenden Optionen sind gültige Befehle des 'd'-Attributs eines SVG-Pfades?
Welche der folgenden Optionen sind gültige Befehle des 'd'-Attributs eines SVG-Pfades?
Was this page helpful?