d

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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 darstellen. Die Befehle werden unten näher erläutert.

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

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

Beispiel

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 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 akzeptiert entweder path() oder none.

Das untenstehende Beispiel zeigt, wie Sie beim Überfahren eines Elements mit der Maus einen neuen Pfad anwenden könnten. Der neue Pfad ist der gleiche wie der alte, fügt jedoch eine Linie quer ü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>

Für ein Animationsbeispiel eines <path>, 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 Parameter des Befehls darstellen.

SVG definiert 6 Arten von Pfadbefehlen, insgesamt 20 Befehle:

Hinweis: Befehle sind groß-/kleinschreibungsempfindlich. Ein Großbuchstabe gibt absolute Koordinaten an, während ein Kleinbuchstabe Koordinaten relativ zur aktuellen Position angibt.

Es ist immer möglich, einen negativen Wert als Argument für einen Befehl anzugeben:

  • negative Winkel sind gegen den Uhrzeigersinn;
  • 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, also das Bewegen des aktuellen Punktes (Po; {xo, yo}). Es wird keine Linie zwischen Po und dem neuen aktuellen Punkt (Pn; {xn, yn}) gezeichnet.

Befehl Parameter Notizen
M (x, y)+

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

Formel: Pn = {x, y}
m (dx, dy)+

Verschiebt den aktuellen Punkt durch Verschieben der letzten bekannten Position des Pfades 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: Pn = {xo + dx, yo + dy}

Beispiele

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 (Po; {xo, yo}) zum Endpunkt (Pn; {xn, yn}), basierend auf den angegebenen Parametern. Der Endpunkt (Pn) wird dann der aktuelle Punkt für den nächsten Befehl (Po′).

Befehl Parameter Notizen
L (x, y)+

Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben wird. Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite absolute LineTo (L)-Befehle interpretiert.

Formel: Po′ = Pn = {x, y}

l (dx, dy)+

Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt, der durch den aktuellen Punkt verschoben mit 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: Po′ = Pn = {xo + dx, yo + dy}

H x+

Zeichnet eine horizontale Linie vom aktuellen Punkt zum Endpunkt, der durch den x-Parameter und die y-Koordinate des aktuellen Punktes spezifiziert ist. Jedes nachfolgende Wert wird als Parameter für implizite absolute horizontale LineTo (H)-Befehle interpretiert.

Formel: Po′ = Pn = {x, yo}

h dx+

Zeichnet eine horizontale Linie vom aktuellen Punkt zum Endpunkt, der durch den aktuellen Punkt verschoben mit dx entlang der x-Achse und der y-Koordinate des aktuellen Punktes spezifiziert ist. Jedes nachfolgende Wert wird als Parameter für implizite relative horizontale LineTo (h)-Befehle interpretiert.

Formel: Po′ = Pn = {xo + dx, yo}

V y+

Zeichnet eine vertikale Linie vom aktuellen Punkt zum Endpunkt, der durch den y-Parameter und die x-Koordinate des aktuellen Punktes spezifiziert ist. Jedes nachfolgende Wert wird als Parameter für implizite absolute vertikale LineTo (V)-Befehle interpretiert.

Formel: Po′ = Pn = {xo, y}

v dy+

Zeichnet eine vertikale Linie vom aktuellen Punkt zum Endpunkt, der durch den aktuellen Punkt verschoben mit dy entlang der y-Achse und der x-Koordinate des aktuellen Punktes spezifiziert ist. Jedes nachfolgende Wert wird als Parameter für implizite relative vertikale LineTo (v)-Befehle interpretiert.

Formel: Po′ = Pn = {xo, yo + dy}

Beispiele

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ézier-Kurve

Kubische Bézier-Kurven sind glatte Kurvendefinitionen unter Verwendung von vier Punkten:

Startpunkt (aktueller Punkt)

(Po = {xo, yo})

Endpunkt

(Pn = {xn, yn})

Start-Kontrollpunkt

(Pcs = {xcs, ycs}) (steuert die Krümmung nahe dem Start der Kurve)

End-Kontrollpunkt

(Pce = {xce, yce}) (steuert die Krümmung nahe dem Ende der Kurve)

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

Befehl Parameter Notizen
C (x1,y1, x2,y2, x,y)+

Zeichnet eine kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der durch x,y spezifiziert ist. Der Start-Kontrollpunkt ist durch x1,y1 und der End-Kontrollpunkt ist durch x2,y2 spezifiziert. Jedes nachfolgende Tripel von Koordinatenpaaren wird als Parameter für implizite absolute kubische Bézier-Kurven (C)-Befehle interpretiert.

Formeln:
Po′ = Pn = {x, y} ;
Pcs = {x1, y1} ;
Pce = {x2, y2}
c (dx1,dy1, dx2,dy2, dx,dy)+

Zeichnet eine kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der um dx entlang der x-Achse und dy entlang der y-Achse vom aktuellen Punkt verschoben ist. Der Start-Kontrollpunkt ist der aktuelle Punkt (Startpunkt der Kurve), verschoben um dx1 entlang der x-Achse und dy1 entlang der y-Achse. Der End-Kontrollpunkt ist der aktuelle Punkt (Startpunkt 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ézier-Kurven (c)-Befehle interpretiert.

Formeln:
Po′ = Pn = {xo + dx, yo + dy} ;
Pcs = {xo + dx1, yo + dy1} ;
Pce = {xo + dx2, yo + dy2}
S (x2,y2, x,y)+ Zeichnet eine glatte kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der durch x,y spezifiziert ist. Der End-Kontrollpunkt ist durch x2,y2 spezifiziert. Der Start-Kontrollpunkt ist die Spiegelung des End-Kontrollpunktes des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézier-Kurve war, ist der Start-Kontrollpunkt der gleiche wie der Startpunkt der Kurve (aktueller Punkt). Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite absolute glatte kubische Bézier-Kurven (S)-Befehle interpretiert.
s (dx2,dy2, dx,dy)+ Zeichnet eine glatte kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der um dx entlang der x-Achse und dy entlang der y-Achse vom aktuellen Punkt verschoben ist. Der End-Kontrollpunkt ist der aktuelle Punkt (Startpunkt der Kurve), verschoben um dx2 entlang der x-Achse und dy2 entlang der y-Achse. Der Start-Kontrollpunkt ist die Spiegelung des End-Kontrollpunktes des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézier-Kurve war, ist der Start-Kontrollpunkt der gleiche wie der Startpunkt der Kurve (aktueller Punkt). Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite relative glatte kubische Bézier-Kurven (s)-Befehle interpretiert.

Beispiele

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ézier-Kurve

Quadratische Bézier-Kurven sind glatte Kurvendefinitionen unter Verwendung von drei Punkten:

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) der aktuelle Punkt für den nächsten Befehl (Po′).

Befehl Parameter Notizen
Q (x1,y1, x,y)+

Zeichnet eine quadratische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der durch x,y spezifiziert ist. Der Kontrollpunkt ist durch x1,y1 spezifiziert. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter für implizite absolute quadratische Bézier-Kurven (Q)-Befehle interpretiert.

Formeln:
Po′ = Pn = {x, y} ;
Pc = {x1, y1}
q (dx1,dy1, dx,dy)+

Zeichnet eine quadratische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der um dx entlang der x-Achse und dy entlang der y-Achse vom aktuellen Punkt verschoben ist. Der Kontrollpunkt ist der aktuelle Punkt (Startpunkt 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ézier-Kurven (q)-Befehle interpretiert.

Formeln:
Po′ = Pn = {xo + dx, yo + dy} ;
Pc = {xo + dx1, yo + dy1}
T (x,y)+

Zeichnet eine glatte quadratische Bézier-Kurve 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ézier-Kurve war, ist der Kontrollpunkt der gleiche wie der Startpunkt der Kurve (aktueller Punkt). Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite absolute glatte quadratische Bézier-Kurven (T)-Befehle interpretiert.

Formel:
Po′ = Pn = {x, y}
t (dx,dy)+

Zeichnet eine glatte quadratische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der um dx entlang der x-Achse und dy entlang der y-Achse vom aktuellen Punkt verschoben ist. Der Kontrollpunkt ist die Spiegelung des Kontrollpunktes des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézier-Kurve war, ist der Kontrollpunkt der gleiche wie der Startpunkt der Kurve (aktueller Punkt). Jedes nachfolgende Koordinatenpaar wird als Parameter für implizite relative glatte quadratische Bézier-Kurven (t)-Befehle interpretiert.

Formeln:
Po′ = Pn = {xo + dx, yo + dy}

Beispiele

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 Teil einer Ellipse definiert sind. Es ist manchmal einfacher, hochgradig regelmäßige Kurven mit einem elliptischen Bogen als mit einer Bézier-Kurve zu zeichnen.

Befehl Parameter Notizen
A (rx ry angle large-arc-flag sweep-flag x y)+

Zeichnet eine Bogenkurve vom aktuellen Punkt zur Koordinate x,y. Der Mittelpunkt der Ellipse, die zur Zeichnung des Bogens verwendet wird, wird automatisch auf Basis der anderen Parameter 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 Bögen (1) oder kleinen Bögen (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 Koordinate x,y wird zum neuen aktuellen Punkt für den nächsten Befehl. Alle nachfolgenden Parameter werden als implizite absolute Bogenkurve (A)-Befehle betrachtet.
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. Der Mittelpunkt der Ellipse, die zur Zeichnung des Bogens verwendet wird, wird automatisch auf Basis der anderen Parameter 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 eines kleinen Bogens (0),
    • sweep-flag erlaubt die Wahl eines im Uhrzeigersinn Bogens (1) oder gegen den Uhrzeigersinn Bogens (0)
Der aktuelle Punkt erhält seine X- und Y-Koordinaten verschoben um dx und dy für den nächsten Befehl. Alle nachfolgenden Parameter werden als implizite relative Bogenkurve (a)-Befehle betrachtet.

Beispiele

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 Notizen
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 Aussehen einer mit ClosePath geschlossenen Form kann sich von einer Form unterscheiden, die durch Zeichnen einer Linie zum Ursprung mit einem der anderen Befehle geschlossen wird, da die Linienenden zusammengefügt werden (gemäß der stroke-linejoin-Einstellung), anstatt einfach auf dieselben Koordinaten gesetzt zu werden.

Beispiele

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

BCD tables only load in the browser

Siehe auch

  • SVG <path> Element
  • CSS d Eigenschaft