d

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Das d-Attribut definiert einen zu zeichnenden Pfad.

Eine Pfaddefinition ist eine Liste von Pfadbefehlen, wobei jeder Befehl aus einem Befehlsbuchstaben und Zahlen besteht, die die Parameter des Befehls repräsentieren. Die Befehle sind unten detailliert beschrieben.

Dieses Attribut wird mit dem SVG <path> Element verwendet.

d ist ein Präsentationsattribut und kann daher auch als CSS-Eigenschaft verwendet werden.

Beispiel

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> </svg>

pfad

Für <path> ist d ein String, der eine Serie von Pfadbefehlen enthält, die den zu zeichnenden Pfad definieren.

Wert	<string>
Standardwert	none
Animierbar	Ja

Verwendung von d als CSS-Eigenschaft

d ist ein Präsentationsattribut und kann daher auch mit CSS modifiziert werden. Die Eigenschaft nimmt entweder path() oder none.

Das folgende Beispiel zeigt, wie Sie beim Überfahren eines Elements mit der Maus einen neuen Pfad anwenden könnten. Der neue Pfad ist derselbe wie der alte, fügt jedoch eine Linie über das Herz hinzu.

css

html, body, svg { height: 100%; } /* This path is displayed on hover */ #svg_css_ex1:hover path { d: path( "M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90" ); }

html

<svg id="svg_css_ex1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z " /> </svg>

Ein Beispiel für eine <path>-Animation finden Sie auf der CSS d-Eigenschaftsreferenzseite.

Pfadbefehle

Pfadbefehle sind Anweisungen, die einen zu zeichnenden Pfad definieren. Jeder Befehl besteht aus einem Befehlsbuchstaben und Zahlen, die die Parameter des Befehls repräsentieren.

SVG definiert 6 Arten von Pfadbefehlen, insgesamt 20 Befehle:

MoveTo: M, m
LineTo: L, l, H, h, V, v
Kubische Bézierkurve: C, c, S, s
Quadratische Bézierkurve: Q, q, T, t
Elliptische Bogenkurve: A, a
ClosePath: Z, z

Hinweis: Befehle sind groß- und kleinschreibungssensitiv. Ein Befehl in Großbuchstaben gibt absolute Koordinaten an, während ein Befehl in Kleinbuchstaben Koordinaten relativ zur aktuellen Position angibt.

Es ist immer möglich, einen negativen Wert als Argument eines Befehls anzugeben:

negative Winkel werden gegen den Uhrzeigersinn sein;
absolute negative x- und y-Werte werden als negative Koordinaten interpretiert;
relative negative x-Werte bewegen sich nach links, und relative negative y-Werte bewegen sich nach oben.

MoveTo Pfadbefehle

MoveTo-Anweisungen können als Aufheben des Zeicheninstruments und Absetzen an einem anderen Ort betrachtet werden—mit anderen Worten, das Bewegen des aktuellen Punkts (P_o; {x_o, y_o}). Es wird keine Linie zwischen P_o und dem neuen aktuellen Punkt (P_n; {x_n, y_n}) gezeichnet.

Befehl Parameter Anmerkungen

Befehl	Parameter	Anmerkungen
M	(`x`, `y`)+	Bewegt den aktuellen Punkt zu den Koordinaten `x`,`y`. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite absolute LineTo (`L`) Befehle interpretiert (siehe unten). Formel: `P_n` = {`x`, `y`}
m	(`dx`, `dy`)+	Bewegt den aktuellen Punkt durch Verschieben der zuletzt bekannten Position des Pfads um `dx` entlang der x-Achse und um `dy` entlang der y-Achse. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite relative LineTo (`l`) Befehle interpretiert (siehe unten). Formel: `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

(x, y)+

Bewegt den aktuellen Punkt zu den Koordinaten x,y. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite absolute LineTo (L) Befehle interpretiert (siehe unten).

Formel: P_n = {x, y}

(dx, dy)+

Bewegt den aktuellen Punkt durch Verschieben der zuletzt bekannten Position des Pfads um dx entlang der x-Achse und um dy entlang der y-Achse. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite relative LineTo (l) Befehle interpretiert (siehe unten).

Formel: P_n = {x_o + dx, y_o + dy}

Beispiele

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="M 10,10 h 10 m 0,10 h 10 m 0,10 h 10 M 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 M 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg>

LineTo Pfadbefehle

LineTo-Anweisungen zeichnen eine gerade Linie vom aktuellen Punkt (P_o; {x_o, y_o}) zum Endpunkt (P_n; {x_n, y_n}), basierend auf den angegebenen Parametern. Der Endpunkt (P_n) wird dann zum aktuellen Punkt für den nächsten Befehl (P_o′).

Befehl	Parameter	Anmerkungen
L	(`x`, `y`)+	Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt, der durch `x`,`y` spezifiziert ist. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite absolute LineTo (`L`) Befehle interpretiert. Formel: `P_o′` = `P_n` = {`x`, `y`}
l	(`dx`, `dy`)+	Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt, der der aktuelle Punkt ist, verschoben um `dx` entlang der x-Achse und `dy` entlang der y-Achse. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite relative LineTo (`l`) Befehle interpretiert (siehe unten). Formel: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}
H	`x`+	Zeichnet eine horizontale Linie vom aktuellen Punkt zum Endpunkt, der durch den `x`-Parameter und den aktuellen Punkt `y`-Koordinate spezifiziert ist. Jede nachfolgende Angabe wird als Parameter für implizite absolute horizontale LineTo (`H`) Befehle interpretiert. Formel: `P_o′` = `P_n` = {`x`, `y_o`}
h	`dx`+	Zeichnet eine horizontale Linie vom aktuellen Punkt zum Endpunkt, der durch den aktuellen Punkt verschoben um `dx` entlang der x-Achse und den aktuellen Punkt `y`-Koordinate spezifiziert ist. Jede nachfolgende Angabe wird als Parameter für implizite relative horizontale LineTo (`h`) Befehle interpretiert. Formel: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o`}
V	`y`+	Zeichnet eine vertikale Linie vom aktuellen Punkt zum Endpunkt, der durch den `y`-Parameter und den aktuellen Punkt `x`-Koordinate spezifiziert ist. Jede nachfolgende Angabe wird als Parameter für implizite absolute vertikale LineTo (`V`) Befehle interpretiert. Formel: `P_o′` = `P_n` = {`x_o`, `y`}
v	`dy`+	Zeichnet eine vertikale Linie vom aktuellen Punkt zum Endpunkt, der durch den aktuellen Punkt verschoben um `dy` entlang der y-Achse und den aktuellen Punkt `x`-Koordinate spezifiziert ist. Jede nachfolgende Angabe wird als Parameter für implizite relative vertikale LineTo (`v`) Befehle interpretiert. Formel: `P_o′` = `P_n` = {`x_o`, `y_o` + `dy`}

Beispiele

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- LineTo commands with absolute coordinates --> <path fill="none" stroke="red" d="M 10,10 L 90,90 V 10 H 50" /> <!-- LineTo commands with relative coordinates --> <path fill="none" stroke="red" d="M 110,10 l 80,80 v -80 h -40" /> </svg>

Kubische Bézierkurve

Kubische Bézierkurven sind glatte Kurvendefinitionen unter Verwendung von vier Punkten:

Startpunkt (aktueller Punkt): (P_o = {x_o, y_o})
Endpunkt: (P_n = {x_n, y_n})
Startkontrollpunkt: (P_cs = {x_cs, y_cs}) (steuert die Krümmung nahe der Kurvenstart)
Endkontrollpunkt: (P_ce = {x_ce, y_ce}) (steuert die Krümmung nahe der Kurvenende)

Nach dem Zeichnen wird der Endpunkt (P_n) der aktuelle Punkt für den nächsten Befehl (P_o′).

Befehl	Parameter	Anmerkungen
C	(`x1`,`y1`, `x2`,`y2`, `x`,`y`)+	Zeichnet eine kubische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch `x`,`y` spezifiziert ist. Der Startkontrollpunkt wird durch `x1`,`y1` spezifiziert und der Endkontrollpunkt wird durch `x2`,`y2` spezifiziert. Jedes nachfolgende Tripel von Koordinatenpaaren wird als Parameter für implizite absolute kubische Bézierkurve (`C`) Befehle interpretiert. Formeln: `P_o′` = `P_n` = {`x`, `y`} ; `P_cs` = {`x1`, `y1`} ; `P_ce` = {`x2`, `y2`}
c	(`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+	Zeichnet eine kubische Bézierkurve vom aktuellen Punkt zum Endpunkt, der der aktuelle Punkt ist, verschoben um `dx` entlang der x-Achse und `dy` entlang der y-Achse. Der Startkontrollpunkt ist der aktuelle Punkt (Anfangspunkt der Kurve) verschoben um `dx1` entlang der x-Achse und `dy1` entlang der y-Achse. Der Endkontrollpunkt ist der aktuelle Punkt (Anfangspunkt der Kurve) verschoben um `dx2` entlang der x-Achse und `dy2` entlang der y-Achse. Jedes nachfolgende Tripel von Koordinatenpaaren wird als Parameter für implizite relative kubische Bézierkurve (`c`) Befehle interpretiert. Formeln: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_cs` = {`x_o` + `dx1`, `y_o` + `dy1`} ; `P_ce` = {`x_o` + `dx2`, `y_o` + `dy2`}
S	(`x2`,`y2`, `x`,`y`)+	Zeichnet eine glatte kubische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch `x`,`y` spezifiziert ist. Der Endkontrollpunkt wird durch `x2`,`y2` spezifiziert. Der Startkontrollpunkt ist die Spiegelung des Endkontrollpunkts des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézierkurve war, ist der Startkontrollpunkt derselbe wie der Anfangspunkt der Kurve (aktueller Punkt). Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite absolute glatte kubische Bézierkurve (`S`) Befehle interpretiert.
s	(`dx2`,`dy2`, `dx`,`dy`)+	Zeichnet eine glatte kubische Bézierkurve vom aktuellen Punkt zum Endpunkt, der der aktuelle Punkt ist, verschoben um `dx` entlang der x-Achse und `dy` entlang der y-Achse. Der Endkontrollpunkt ist der aktuelle Punkt (Anfangspunkt der Kurve), verschoben um `dx2` entlang der x-Achse und `dy2` entlang der y-Achse. Der Startkontrollpunkt ist die Spiegelung des Endkontrollpunkts des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézierkurve war, ist der Startkontrollpunkt derselbe wie der Anfangspunkt der Kurve (aktueller Punkt). Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite relative glatte kubische Bézierkurve (`s`) Befehle interpretiert.

Beispiele

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Cubic Bézier curve with absolute coordinates --> <path fill="none" stroke="red" d="M 10,90 C 30,90 25,10 50,10 S 70,90 90,90" /> <!-- Cubic Bézier curve with relative coordinates --> <path fill="none" stroke="red" d="M 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" /> <!-- Highlight the curve vertex and control points --> <g id="ControlPoints"> <!-- First cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="30" cy="90" r="1.5" /> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5" /> <!-- Second smooth command control points (the first one is implicit) --> <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> <circle cx="75" cy="10" r="1.5" fill="lightgrey" /> <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /> <circle cx="70" cy="90" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="90" r="1.5" /> <circle cx="50" cy="10" r="1.5" /> <circle cx="90" cy="90" r="1.5" /> </g> <use href="#ControlPoints" x="100" /> </svg>

Quadratische Bézierkurve

Quadratische Bézierkurven sind glatte Kurvendefinitionen unter Verwendung von drei Punkten:

Startpunkt (aktueller Punkt): P_o = {x_o, y_o}
Endpunkt: P_n = {x_n, y_n}
Kontrollpunkt: P_c = {x_c, y_c} (steuert die Krümmung)

Nach dem Zeichnen wird der Endpunkt (P_n) der aktuelle Punkt für den nächsten Befehl (P_o′).

Befehl	Parameter	Anmerkungen
Q	(`x1`,`y1`, `x`,`y`)+	Zeichnet eine quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch `x`,`y` spezifiziert ist. Der Kontrollpunkt wird durch `x1`,`y1` spezifiziert. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite absolute quadratische Bézierkurve (`Q`) Befehle interpretiert. Formeln: `P_o′` = `P_n` = {`x`, `y`} ; `P_c` = {`x1`, `y1`}
q	(`dx1`,`dy1`, `dx`,`dy`)+	Zeichnet eine quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt, der der aktuelle Punkt ist, verschoben um `dx` entlang der x-Achse und `dy` entlang der y-Achse. Der Kontrollpunkt ist der aktuelle Punkt (Anfangspunkt der Kurve) verschoben um `dx1` entlang der x-Achse und `dy1` entlang der y-Achse. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite relative quadratische Bézierkurve (`q`) Befehle interpretiert. Formeln: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_c` = {`x_o` + `dx1`, `y_o` + `dy1`}
T	(`x`,`y`)+	Zeichnet eine glatte quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch `x`,`y` spezifiziert ist. Der Kontrollpunkt ist die Spiegelung des Kontrollpunktes des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézierkurve war, ist der Kontrollpunkt derselbe wie der Anfangspunkt der Kurve (aktueller Punkt). Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite absolute glatte quadratische Bézierkurve (`T`) Befehle interpretiert. Formel: `P_o′` = `P_n` = {`x`, `y`}
t	(`dx`,`dy`)+	Zeichnet eine glatte quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt, der der aktuelle Punkt ist, verschoben um `dx` entlang der x-Achse und `dy` entlang der y-Achse. Der Kontrollpunkt ist die Spiegelung des Kontrollpunktes des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézierkurve war, ist der Kontrollpunkt derselbe wie der Anfangspunkt der Kurve (aktueller Punkt). Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite relative glatte quadratische Bézierkurve (`t`) Befehle interpretiert. Formeln: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

Beispiele

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Quadratic Bézier curve with implicit repetition --> <path fill="none" stroke="red" d="M 10,50 Q 25,25 40,50 t 30,0 30,0 30,0 30,0 30,0" /> <!-- Highlight the curve vertex and control points --> <g> <polyline points="10,50 25,25 40,50" stroke="rgb(0 0 0 / 20%)" fill="none" /> <circle cx="25" cy="25" r="1.5" /> <!-- Curve vertex points --> <circle cx="10" cy="50" r="1.5" /> <circle cx="40" cy="50" r="1.5" /> <g id="SmoothQuadraticDown"> <polyline points="40,50 55,75 70,50" stroke="rgb(0 0 0 / 20%)" stroke-dasharray="2" fill="none" /> <circle cx="55" cy="75" r="1.5" fill="lightgrey" /> <circle cx="70" cy="50" r="1.5" /> </g> <g id="SmoothQuadraticUp"> <polyline points="70,50 85,25 100,50" stroke="rgb(0 0 0 / 20%)" stroke-dasharray="2" fill="none" /> <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> <circle cx="100" cy="50" r="1.5" /> </g> <use href="#SmoothQuadraticDown" x="60" /> <use href="#SmoothQuadraticUp" x="60" /> <use href="#SmoothQuadraticDown" x="120" /> </g> </svg>

Elliptische Bogenkurve

Elliptische Bogenkurven sind Kurven, die als ein Teil einer Ellipse definiert werden. Manchmal ist es einfacher, hochgradig regelmäßige Kurven mit einem elliptischen Bogen zu zeichnen als mit einer Bézierkurve.

Befehl Parameter Anmerkungen

Befehl	Parameter	Anmerkungen
A	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `x` `y`)+	Zeichnet eine Bogenkurve vom aktuellen Punkt zu den Koordinaten `x`,`y`. Das Zentrum der Ellipse, die zur Zeichnung des Bogens verwendet wird, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt: `rx` und `ry` sind die beiden Radien der Ellipse; `angle` stellt eine Drehung (in Grad) der Ellipse relativ zur x-Achse dar; `large-arc-flag` und `sweep-flag` erlauben es, auszuwählen, welcher Bogen gezeichnet werden soll, da 4 mögliche Bögen aus den anderen Parametern gezeichnet werden können. `large-arc-flag` erlaubt es, einen der großen Bogen (`1`) oder kleinen Bogen (`0`) auszuwählen, `sweep-flag` erlaubt es, einen der im Uhrzeigersinn drehenden Bögen (`1`) oder gegen den Uhrzeigersinn drehenden Bögen (`0`) auszuwählen. Die Koordinaten `x`,`y` werden zum neuen aktuellen Punkt für den nächsten Befehl. Alle nachfolgenden Parametersätze werden als implizite absolute Bogenkurven (`A`) Befehle interpretiert.
a	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `dx` `dy`)+	Zeichnet eine Bogenkurve vom aktuellen Punkt zu einem Punkt, dessen Koordinaten die des aktuellen Punktes sind, verschoben um `dx` entlang der x-Achse und `dy` entlang der y-Achse. Das Zentrum der Ellipse, die zur Zeichnung des Bogens verwendet wird, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt: `rx` und `ry` sind die beiden Radien der Ellipse; `angle` stellt eine Drehung (in Grad) der Ellipse relativ zur x-Achse dar; `large-arc-flag` und `sweep-flag` erlauben es, auszuwählen, welcher Bogen gezeichnet werden soll, da 4 mögliche Bögen aus den anderen Parametern gezeichnet werden können. `large-arc-flag` erlaubt die Wahl eines großen Bogens (`1`) oder kleinen Bogens (`0`), `sweep-flag` erlaubt die Wahl eines im Uhrzeigersinn drehenden Bogens (`1`) oder gegen den Uhrzeigersinn drehenden Bogens (`0`) Der aktuelle Punkt erhält seine X- und Y-Koordinaten, die mit `dx` und `dy` für den nächsten Befehl verschoben werden. Alle nachfolgenden Parametersätze werden als implizite relative Bogenkurven (`a`) Befehle interpretiert.

(rx ry angle large-arc-flag sweep-flag x y)+

Zeichnet eine Bogenkurve vom aktuellen Punkt zu den Koordinaten x,y. Das Zentrum der Ellipse, die zur Zeichnung des Bogens verwendet wird, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt:

rx und ry sind die beiden Radien der Ellipse;
angle stellt eine Drehung (in Grad) der Ellipse relativ zur x-Achse dar;
large-arc-flag und sweep-flag erlauben es, auszuwählen, welcher Bogen gezeichnet werden soll, da 4 mögliche Bögen aus den anderen Parametern gezeichnet werden können.
- large-arc-flag erlaubt es, einen der großen Bogen (1) oder kleinen Bogen (0) auszuwählen,
- sweep-flag erlaubt es, einen der im Uhrzeigersinn drehenden Bögen (1) oder gegen den Uhrzeigersinn drehenden Bögen (0) auszuwählen.

Die Koordinaten x,y werden zum neuen aktuellen Punkt für den nächsten Befehl. Alle nachfolgenden Parametersätze werden als implizite absolute Bogenkurven (A) Befehle interpretiert.

(rx ry angle large-arc-flag sweep-flag dx dy)+

Zeichnet eine Bogenkurve vom aktuellen Punkt zu einem Punkt, dessen Koordinaten die des aktuellen Punktes sind, verschoben um dx entlang der x-Achse und dy entlang der y-Achse. Das Zentrum der Ellipse, die zur Zeichnung des Bogens verwendet wird, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt:

rx und ry sind die beiden Radien der Ellipse;
angle stellt eine Drehung (in Grad) der Ellipse relativ zur x-Achse dar;
large-arc-flag und sweep-flag erlauben es, auszuwählen, welcher Bogen gezeichnet werden soll, da 4 mögliche Bögen aus den anderen Parametern gezeichnet werden können.
- large-arc-flag erlaubt die Wahl eines großen Bogens (1) oder kleinen Bogens (0),
- sweep-flag erlaubt die Wahl eines im Uhrzeigersinn drehenden Bogens (1) oder gegen den Uhrzeigersinn drehenden Bogens (0)

Der aktuelle Punkt erhält seine X- und Y-Koordinaten, die mit dx und dy für den nächsten Befehl verschoben werden. Alle nachfolgenden Parametersätze werden als implizite relative Bogenkurven (a) Befehle interpretiert.

Beispiele

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <!-- The influence of the arc flags with which the arc is drawn --> <path fill="none" stroke="red" d="M 6,10 A 6 4 10 1 0 14,10" /> <path fill="none" stroke="lime" d="M 6,10 A 6 4 10 1 1 14,10" /> <path fill="none" stroke="purple" d="M 6,10 A 6 4 10 0 1 14,10" /> <path fill="none" stroke="pink" d="M 6,10 A 6 4 10 0 0 14,10" /> </svg>

ClosePath

ClosePath-Anweisungen zeichnen eine gerade Linie von der aktuellen Position zum ersten Punkt im Pfad.

Befehl	Parameter	Anmerkungen
Z, z		Schließt den aktuellen Unterpfad, indem der letzte Punkt des Pfades mit seinem Anfangspunkt verbunden wird. Wenn die beiden Punkte unterschiedliche Koordinaten haben, wird eine gerade Linie zwischen diesen beiden Punkten gezeichnet.

Hinweis: Das Erscheinungsbild einer mit ClosePath geschlossenen Form kann sich von einer, die durch Zeichnen einer Linie zum Ursprung geschlossen wird, unterscheiden, wenn eine der anderen Befehle verwendet wird, weil die Linienenden zusammengefügt werden (entsprechend der stroke-linejoin-Einstellung), anstatt nur an denselben Koordinaten platziert zu werden.

Beispiele

html, body, svg { height: 100%; }

html

<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> <!-- An open shape with the last point of the path different to the first one --> <path stroke="red" d="M 5,1 l -4,8 8,0" /> <!-- An open shape with the last point of the path matching the first one --> <path stroke="red" d="M 15,1 l -4,8 8,0 -4,-8" /> <!-- A closed shape with the last point of the path different to the first one --> <path stroke="red" d="M 25,1 l -4,8 8,0 z" /> </svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # DProperty
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute

Browser-Kompatibilität

Siehe auch

SVG <path> Element
CSS d Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden