1. Web
  2. SVG
  3. Reference
  4. Attributes
  5. d

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

d

Baseline
Weitgehend verfügbar
*

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das Attribut d definiert einen zu zeichnenden Pfad.

Eine Pfaddefinition ist eine Liste von Pfadbefehlen. Jeder Befehl besteht aus einem Befehlsbuchstaben und Zahlen, die seine Parameter darstellen. Die Befehle werden weiter unten ausführlich beschrieben.

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

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

path

Für <path> ist d eine Zeichenfolge mit einer Reihe von Pfadbefehlen, die den zu zeichnenden Pfad definieren.

Wert <string>
Standardwert none
Animierbar Ja

d als CSS-Eigenschaft verwenden

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

Das folgende Beispiel zeigt, wie Sie beim Bewegen des Mauszeigers über ein Element einen neuen Pfad anwenden können. Der neue Pfad entspricht dem alten, fügt aber eine Linie quer durch 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 die Animation eines <path> finden Sie auf der Referenzseite zur CSS-Eigenschaft d.

Pfadbefehle

Pfadbefehle sind Anweisungen, die einen zu zeichnenden Pfad definieren. Jeder Befehl besteht aus einem Befehlsbuchstaben und Zahlen, die seine Parameter darstellen.

SVG definiert 6 Arten von Pfadbefehlen mit insgesamt 20 Befehlen:

Hinweis: Bei Befehlen wird zwischen Groß- und Kleinschreibung unterschieden. Ein Großbuchstabe gibt absolute Koordinaten an, ein Kleinbuchstabe dagegen Koordinaten relativ zur aktuellen Position.

Als Argument für einen Befehl kann immer ein negativer Wert angegeben werden:

  • Negative Winkel verlaufen gegen den Uhrzeigersinn.
  • Negative absolute x- und y-Werte werden als negative Koordinaten interpretiert.
  • Negative relative x-Werte verschieben die Position nach links, negative relative y-Werte nach oben.

MoveTo-Pfadbefehle

MoveTo-Anweisungen lassen sich so verstehen, als würde man das Zeichenwerkzeug anheben und an einer anderen Stelle wieder absetzen. Mit anderen Worten: Sie verschieben den aktuellen Punkt (Po; {xo, yo}). Zwischen Po und dem neuen aktuellen Punkt (Pn; {xn, yn}) wird keine Linie gezeichnet.

Befehl Parameter Hinweise
M (x, y)+

Verschiebt den aktuellen Punkt zur Koordinate x,y. Jedes nachfolgende Koordinatenpaar wird als Parameter eines impliziten absoluten LineTo-Befehls (L) interpretiert (siehe unten).

Formel: Pn = {x, y}

m (dx, dy)+

Verschiebt den aktuellen Punkt, indem die letzte bekannte Position des Pfads um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Jedes nachfolgende Koordinatenpaar wird als Parameter eines impliziten relativen LineTo-Befehls (l) 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 anhand der angegebenen Parameter eine gerade Linie vom aktuellen Punkt (Po; {xo, yo}) zum Endpunkt (Pn; {xn, yn}). Der Endpunkt (Pn) wird anschließend zum aktuellen Punkt für den nächsten Befehl (Po′).

Befehl Parameter Hinweise
L (x, y)+

Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben wird. Jedes nachfolgende Koordinatenpaar wird als Parameter eines impliziten absoluten LineTo-Befehls (L) interpretiert.

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

l (dx, dy)+

Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt. Dieser ergibt sich, indem der aktuelle Punkt um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Jedes nachfolgende Koordinatenpaar wird als Parameter eines impliziten relativen LineTo-Befehls (l) interpretiert (siehe unten).

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

H x+

Zeichnet eine horizontale Linie vom aktuellen Punkt zum Endpunkt. Dieser wird durch den Parameter x und die y-Koordinate des aktuellen Punkts bestimmt. Jeder nachfolgende Wert wird als Parameter eines impliziten absoluten horizontalen LineTo-Befehls (H) interpretiert.

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

h dx+

Zeichnet eine horizontale Linie vom aktuellen Punkt zum Endpunkt. Dessen x-Koordinate ergibt sich, indem der aktuelle Punkt um dx entlang der x-Achse verschoben wird; seine y-Koordinate entspricht der des aktuellen Punkts. Jeder nachfolgende Wert wird als Parameter eines impliziten relativen horizontalen LineTo-Befehls (h) interpretiert.

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

V y+

Zeichnet eine vertikale Linie vom aktuellen Punkt zum Endpunkt. Dieser wird durch den Parameter y und die x-Koordinate des aktuellen Punkts bestimmt. Jeder nachfolgende Wert wird als Parameter eines impliziten absoluten vertikalen LineTo-Befehls (V) interpretiert.

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

v dy+

Zeichnet eine vertikale Linie vom aktuellen Punkt zum Endpunkt. Dessen y-Koordinate ergibt sich, indem der aktuelle Punkt um dy entlang der y-Achse verschoben wird; seine x-Koordinate entspricht der des aktuellen Punkts. Jeder nachfolgende Wert wird als Parameter eines impliziten relativen vertikalen LineTo-Befehls (v) 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ézierkurve

Kubische Bézierkurven sind glatte Kurven, die durch vier Punkte definiert werden:

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 Hinweise
C (x1,y1, x2,y2, x,y)+

Zeichnet eine kubische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben wird. Der Anfangskontrollpunkt wird durch x1,y1 und der Endkontrollpunkt durch x2,y2 angegeben. Jedes nachfolgende Tripel von Koordinatenpaaren wird als Parameter eines impliziten absoluten Befehls für eine kubische Bézierkurve (C) interpretiert.

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

Zeichnet eine kubische Bézierkurve vom aktuellen Punkt zum Endpunkt. Dieser ergibt sich, indem der aktuelle Punkt um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Der Anfangskontrollpunkt ergibt sich, indem der aktuelle Punkt (der Startpunkt der Kurve) um dx1 entlang der x-Achse und um dy1 entlang der y-Achse verschoben wird. Der Endkontrollpunkt ergibt sich, indem der aktuelle Punkt (der Startpunkt der Kurve) um dx2 entlang der x-Achse und um dy2 entlang der y-Achse verschoben wird. Jedes nachfolgende Tripel von Koordinatenpaaren wird als Parameter eines impliziten relativen Befehls für eine kubische Bézierkurve (c) 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ézierkurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben wird. Der Endkontrollpunkt wird durch x2,y2 angegeben. Der Anfangskontrollpunkt ist die Spiegelung des Endkontrollpunkts des vorherigen Kurvenbefehls am aktuellen Punkt. War der vorherige Befehl kein Befehl für eine kubische Bézierkurve, stimmt der Anfangskontrollpunkt mit dem Startpunkt der Kurve (aktueller Punkt) überein. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter eines impliziten absoluten Befehls für eine glatte kubische Bézierkurve (S) interpretiert.
s (dx2,dy2, dx,dy)+ Zeichnet eine glatte kubische Bézierkurve vom aktuellen Punkt zum Endpunkt. Dieser ergibt sich, indem der aktuelle Punkt um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Der Endkontrollpunkt ergibt sich, indem der aktuelle Punkt (der Startpunkt der Kurve) um dx2 entlang der x-Achse und um dy2 entlang der y-Achse verschoben wird. Der Anfangskontrollpunkt ist die Spiegelung des Endkontrollpunkts des vorherigen Kurvenbefehls am aktuellen Punkt. War der vorherige Befehl kein Befehl für eine kubische Bézierkurve, stimmt der Anfangskontrollpunkt mit dem Startpunkt der Kurve (aktueller Punkt) überein. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter eines impliziten relativen Befehls für eine glatte kubische Bézierkurve (s) 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ézierkurve

Quadratische Bézierkurven sind glatte Kurven, die durch drei Punkte definiert werden:

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 Hinweise
Q (x1,y1, x,y)+

Zeichnet eine quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben wird. Der Kontrollpunkt wird durch x1,y1 angegeben. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter eines impliziten absoluten Befehls für eine quadratische Bézierkurve (Q) interpretiert.

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

Zeichnet eine quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt. Dieser ergibt sich, indem der aktuelle Punkt um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Der Kontrollpunkt ergibt sich, indem der aktuelle Punkt (der Startpunkt der Kurve) um dx1 entlang der x-Achse und um dy1 entlang der y-Achse verschoben wird. Jedes nachfolgende Paar von Koordinatenpaaren wird als Parameter eines impliziten relativen Befehls für eine quadratische Bézierkurve (q) interpretiert.

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

Zeichnet eine glatte quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben wird. Der Kontrollpunkt ist die Spiegelung des Kontrollpunkts des vorherigen Kurvenbefehls am aktuellen Punkt. War der vorherige Befehl kein Befehl für eine quadratische Bézierkurve, stimmt der Kontrollpunkt mit dem Startpunkt der Kurve (aktueller Punkt) überein. Jedes nachfolgende Koordinatenpaar wird als Parameter eines impliziten absoluten Befehls für eine glatte quadratische Bézierkurve (T) interpretiert.

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

Zeichnet eine glatte quadratische Bézierkurve vom aktuellen Punkt zum Endpunkt. Dieser ergibt sich, indem der aktuelle Punkt um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Der Kontrollpunkt ist die Spiegelung des Kontrollpunkts des vorherigen Kurvenbefehls am aktuellen Punkt. War der vorherige Befehl kein Befehl für eine quadratische Bézierkurve, stimmt der Kontrollpunkt mit dem Startpunkt der Kurve (aktueller Punkt) überein. Jedes nachfolgende Koordinatenpaar wird als Parameter eines impliziten relativen Befehls für eine glatte quadratische Bézierkurve (t) 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>

Elliptischer Bogen

Elliptische Bögen sind Kurven, die als Teil einer Ellipse definiert werden. Stark regelmäßige Kurven lassen sich mit einem elliptischen Bogen mitunter leichter zeichnen als mit einer Bézierkurve.

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

Zeichnet einen Bogen vom aktuellen Punkt zur Koordinate x,y. Der Mittelpunkt der Ellipse, mit der der Bogen gezeichnet wird, wird anhand der übrigen Befehlsparameter automatisch bestimmt:

  • rx und ry sind die beiden Radien der Ellipse.
  • angle gibt die Drehung der Ellipse relativ zur x-Achse in Grad an.
  • Mit large-arc-flag und sweep-flag können Sie auswählen, welcher Bogen gezeichnet wird. Mit den übrigen Parametern sind vier mögliche Bögen definiert.
    • Mit large-arc-flag wählen Sie zwischen einem großen Bogen (1) und einem kleinen Bogen (0).
    • Mit sweep-flag wählen Sie zwischen einem im Uhrzeigersinn verlaufenden Bogen (1) und einem gegen den Uhrzeigersinn verlaufenden Bogen (0).
Die Koordinate x,y wird zum neuen aktuellen Punkt für den nächsten Befehl. Jeder nachfolgende Parametersatz gilt als impliziter absoluter Bogenbefehl (A).
a (rx ry angle large-arc-flag sweep-flag dx dy)+

Zeichnet einen Bogen vom aktuellen Punkt zu einem Punkt, dessen Koordinaten sich ergeben, indem der aktuelle Punkt um dx entlang der x-Achse und um dy entlang der y-Achse verschoben wird. Der Mittelpunkt der Ellipse, mit der der Bogen gezeichnet wird, wird anhand der übrigen Befehlsparameter automatisch bestimmt:

  • rx und ry sind die beiden Radien der Ellipse.
  • angle gibt die Drehung der Ellipse relativ zur x-Achse in Grad an.
  • Mit large-arc-flag und sweep-flag können Sie auswählen, welcher Bogen gezeichnet wird. Mit den übrigen Parametern sind vier mögliche Bögen definiert.
    • Mit large-arc-flag wählen Sie zwischen einem großen Bogen (1) und einem kleinen Bogen (0).
    • Mit sweep-flag wählen Sie zwischen einem im Uhrzeigersinn verlaufenden Bogen (1) und einem gegen den Uhrzeigersinn verlaufenden Bogen (0).
Für den nächsten Befehl werden die X- und Y-Koordinaten des aktuellen Punkts um dx beziehungsweise dy verschoben. Jeder nachfolgende Parametersatz gilt als impliziter relativer Bogenbefehl (a).

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 des Pfads.

Befehl Parameter Hinweise
Z, z Schließt den aktuellen Teilpfad, indem der letzte Punkt des Pfads mit seinem Anfangspunkt verbunden wird. Liegen die beiden Punkte an unterschiedlichen Koordinaten, wird eine gerade Linie zwischen ihnen gezeichnet.

Hinweis: Eine mit ClosePath geschlossene Form kann anders aussehen als eine Form, die mit einem der anderen Befehle durch eine Linie zum Anfangspunkt geschlossen wird. Bei ClosePath werden die Linienenden gemäß der Einstellung stroke-linejoin miteinander verbunden, statt lediglich an denselben Koordinaten zu liegen.

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>

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>

Spezifikationen

Spezifikation
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-Element <path>
  • CSS-Eigenschaft d

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden