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, bei denen jeder Befehl aus einem Befehlsbuchstaben und Zahlen besteht, die die Befehlsparameter darstellen. Die Befehle werden unten ausführlich 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
<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>
path
Für <path>
ist d
eine Zeichenkette, die eine Reihe 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 man einen neuen Pfad beim Überfahren eines Elements mit der Maus anwenden könnte. Der neue Pfad entspricht dem alten, fügt jedoch eine Linie durch das Herz hinzu.
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"
);
}
<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>
Für ein <path>
-Animation Beispiel, siehe die CSS d
Eigenschafts-Referenzseite.
Pfadbefehle
Pfadbefehle sind Anweisungen, die einen zu zeichnenden Pfad definieren. Jeder Befehl besteht aus einem Befehlsbuchstaben und Zahlen, die die Befehlsparameter darstellen.
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ß-/klein-schreibungssensitiv. Ein Großbuchstaben-Befehl gibt absolute Koordinaten an, während ein Kleinbuchstaben-Befehl Koordinaten relativ zur aktuellen Position angibt.
Es ist immer möglich, einen negativen Wert als Argument für einen Befehl 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 das Aufheben des Zeicheninstruments und das Absetzen an einer anderen Stelle betrachtet werden - mit anderen Worten, das Bewegen des aktuellen Punkts (Po; {xo, yo}). Es wird keine Linie zwischen Po und dem neuen aktuellen Punkt (Pn; {xn, yn}) gezeichnet.
Befehl | Parameter | Anmerkungen |
---|---|---|
M |
(x , y )+
|
Bewegen Sie den aktuellen Punkt zur Koordinate
Formel: Pn = { |
m |
(dx , dy )+
|
Bewegen Sie den aktuellen Punkt, indem Sie die zuletzt
bekannte Position des Pfads um
Formel: Pn = {xo
+ |
Beispiele
<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 (Po; {xo, yo}) zum Endpunkt (Pn; {xn, yn}), basierend auf den angegebenen Parametern. Der Endpunkt (Pn) wird dann zum aktuellen Punkt für den nächsten Befehl (Po′).
Befehl | Parameter | Anmerkungen |
---|---|---|
L | (x , y )+ |
Zeichnen Sie eine Linie vom aktuellen Punkt zum
Endpunkt, der durch
Formel: Po′ =
Pn = { |
l |
(dx , dy )+
|
Zeichnen Sie eine Linie vom aktuellen Punkt zum
Endpunkt, der ist der aktuelle Punkt verschoben um
Formel: Po′ =
Pn = {xo +
|
H |
x +
|
Zeichnen Sie eine horizontale Linie vom aktuellen Punkt zum
Endpunkt, der durch den
Formel: Po′ =
Pn = { |
h |
dx +
|
Zeichnen Sie eine horizontale Linie vom aktuellen Punkt zum
Endpunkt, der ist der aktuelle Punkt verschoben um
Formel: Po′ =
Pn = {xo +
|
V |
y +
|
Zeichnen Sie eine vertikale Linie vom aktuellen Punkt zum
Endpunkt, der durch den
Formel: Po′ =
Pn = {xo, |
v |
dy +
|
Zeichnen Sie eine vertikale Linie vom aktuellen Punkt zum
Endpunkt, der ist der aktuelle Punkt verschoben um
Formel: Po′ =
Pn = {xo, yo + |
Beispiele
<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, die vier Punkte verwenden:
- Startpunkt (aktueller Punkt)
-
(Po = {xo, yo})
- Endpunkt
-
(Pn = {xn, yn})
- Anfangskontrollpunkt
-
(Pcs = {xcs, ycs}) (steuert die Krümmung nahe dem Anfang der Kurve)
- Endkontrollpunkt
-
(Pce = {xce, yce}) (steuert die Krümmung nahe dem Ende der Kurve)
Nach dem Zeichnen wird der Endpunkt (Pn) zum aktuellen Punkt für den nächsten Befehl (Po′).
Befehl | Parameter | Anmerkungen |
---|---|---|
C |
(x1 ,y1 , x2 ,y2 , x ,y )+
|
Zeichnen Sie eine kubische Bézierkurve vom aktuellen Punkt
zum Endpunkt, der durch
|
c |
(dx1 ,dy1 , dx2 ,dy2 , dx ,dy )+
|
Zeichnen Sie eine kubische Bézierkurve vom aktuellen Punkt
zum Endpunkt, der ist der aktuelle Punkt verschoben
um
|
S |
(x2 ,y2 , x ,y )+
|
Zeichnen Sie eine glatte kubische Bézierkurve vom aktuellen
Punkt zum Endpunkt, der durch x ,y angegeben ist. Der
Endkontrollpunkt wird durch x2 ,y2 angegeben. Der
Anfangskontrollpunkt ist die Spiegelung des
Endkontrollpunkts des vorherigen Kurvenbefehls um den
aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézierkurve war, ist der
Anfangskontrollpunkt derselbe wie der
Startpunkt der Kurve (aktueller Punkt). Jede nachfolgende
Zweiergruppe von Koordinatenpaaren wird als Parameter für implizite
absolute glatte kubische Bézierkurve (S ) Befehle
interpretiert.
|
s |
(dx2 ,dy2 , dx ,dy )+
|
Zeichnen Sie eine glatte kubische Bézierkurve vom aktuellen
Punkt zum Endpunkt, der ist der aktuelle Punkt
verschoben um dx entlang der x-Achse und
dy entlang der y-Achse. Der
Endkontrollpunkt ist der aktuelle Punkt (Startpunkt
der Kurve) verschoben um dx2 entlang der
x-Achse und dy2 entlang der y-Achse. Der
Anfangskontrollpunkt ist die Spiegelung des
Endkontrollpunkts des vorherigen Kurvenbefehls um den
aktuellen Punkt. Wenn der vorherige Befehl keine kubische
Bézierkurve war, ist der Anfangskontrollpunkt derselbe wie der
Startpunkt der Kurve (aktueller Punkt). Jede nachfolgende
Zweiergruppe von Koordinatenpaaren wird als Parameter für implizite
relative glatte kubische Bézierkurve (s ) Befehle
interpretiert.
|
Beispiele
<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, die drei Punkte verwenden:
- Startpunkt (aktueller Punkt)
-
Po = {xo, yo}
- Endpunkt
-
Pn = {xn, yn}
- Kontrollpunkt
-
Pc = {xc, yc} (steuert die Krümmung)
Nach dem Zeichnen wird der Endpunkt (Pn) zum aktuellen Punkt für den nächsten Befehl (Po′).
Befehl | Parameter | Anmerkungen |
---|---|---|
Q |
(x1 ,y1 , x ,y )+
|
Zeichnen Sie eine quadratische Bézierkurve vom aktuellen
Punkt zum Endpunkt, der durch
|
q |
(dx1 ,dy1 , dx ,dy )+
|
Zeichnen Sie eine quadratische Bézierkurve vom aktuellen
Punkt zum Endpunkt, der ist der aktuelle Punkt
verschoben um
|
T |
(x ,y )+
|
Zeichnen Sie eine glatte quadratische Bézierkurve vom
aktuellen Punkt zum Endpunkt, der durch
|
t |
(dx ,dy )+
|
Zeichnen Sie eine glatte quadratische Bézierkurve vom
aktuellen Punkt zum Endpunkt, der ist der
aktuelle Punkt verschoben um
|
Beispiele
<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 Teil einer Ellipse definiert sind. Es ist manchmal einfacher, hochgradig regelmäßige Kurven mit einer elliptischen Bogenkurve als mit einer Bézierkurve zu zeichnen.
Befehl | Parameter | Anmerkungen |
---|---|---|
A |
(rx ry
angle large-arc-flag
sweep-flag x
y )+
|
Zeichnen Sie einen Bogen von der aktuellen Position zum Koordinatenpunkt
x ,y wird zum neuen aktuellen Punkt für den
nächsten Befehl. Alle nachfolgenden Parametersets werden als implizite
absolute Bogenkurven (A ) Befehle betrachtet.
|
a |
(rx ry
angle large-arc-flag
sweep-flag dx
dy )+
|
Zeichnen Sie einen Bogen von der aktuellen Position zu einem Punkt,
dessen Koordinaten die der aktuellen Position verschoben um
dx und dy verschoben
für den nächsten Befehl. Alle nachfolgenden Parametersets werden als
implizite relative Bogenkurven (a ) Befehle betrachtet.
|
Beispiele
<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ßen Sie den aktuellen Unterpfad, indem Sie den letzten Punkt des Pfads mit seinem Anfangspunkt verbinden. Wenn die beiden Punkte an unterschiedlichen Koordinaten liegen, wird eine gerade Linie zwischen diesen beiden Punkten gezeichnet. |
Hinweis:
Das Aussehen einer mit ClosePath geschlossenen Form kann sich von dem einer Form unterscheiden, die durch das Zeichnen einer Linie zum Ursprung geschlossen wurde, indem ein anderer Befehl verwendet wird, da die Linienenden miteinander verbunden sind (gemäß der stroke-linejoin
Einstellung), anstatt einfach an denselben Koordinaten platziert zu werden.
Beispiele
<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
Browser-Kompatibilität
Loading…