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 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 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
<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 ein String, der eine Serie von Pfadbefehlen enthält, die den zu zeichnenden Pfad definieren.

Wert <string>
Standardwert keiner
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 einen neuen Pfad beim Hover über ein Element 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>

Für ein Beispiel zur Animation eines <path>, sehen Sie die CSS d Eigenschaftsreferenzseite.

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:

Hinweis: Befehle sind groß-/kleinschreibungssensitiv. 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 Aufnehmen des Zeichengeräts und erneutes Absetzen an einem anderen Ort verstanden werden—mit anderen Worten, das Verschieben 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)+

Bewegt den aktuellen Punkt zur Koordinate x,y. Alle nachfolgenden Koordinatenpaare werden als Parameter für implizite absolute LineTo (L)-Befehle interpretiert (siehe unten).

Formel: Pn = {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. Alle nachfolgenden Koordinatenpaare werden 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 von dem 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)+

Zeichnet eine Linie vom aktuellen Punkt zum Endpunkt angegeben durch x,y. Alle nachfolgenden Koordinatenpaare werden 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 der aktuelle Punkt ist, verschoben um dx entlang der x-Achse und dy entlang der y-Achse. Alle nachfolgenden Koordinatenpaare werden 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 Punkts angegeben ist. Alle nachfolgenden Werte werden 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 um dx entlang der x-Achse und die y-Koordinate des aktuellen Punkts angegeben ist. Alle nachfolgenden Wert(e) werden 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 Punkts angegeben ist. Alle nachfolgenden Werte werden 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 um dy entlang der y-Achse und die x-Koordinate des aktuellen Punkts angegeben ist. Alle nachfolgenden Wert(e) werden 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 Kurven, die mit vier Punkten definiert werden:

Startpunkt (aktueller Punkt)

(Po = {xo, yo})

Endpunkt

(Pn = {xn, yn})

Start-Kontrollpunkt

(Pcs = {xcs, ycs}) (kontrolliert die Krümmung in der Nähe des Anfangs der Kurve)

End-Kontrollpunkt

(Pce = {xce, yce}) (kontrolliert die Krümmung in der Nähe des Endes 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)+

Zeichnet eine kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt angegeben durch x,y. Der Start-Kontrollpunkt ist durch x1,y1 und der End-Kontrollpunkt ist durch x2,y2 angegeben. Alle nachfolgenden Triplets von Koordinatenpaaren werden 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 der aktuelle Punkt ist, verschoben um dx entlang der x-Achse und dy entlang der y-Achse. 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. Alle nachfolgenden Triplets von Koordinatenpaaren werden 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 angegeben durch x,y. Der End-Kontrollpunkt ist durch x2,y2 angegeben. Der Start-Kontrollpunkt ist die Spiegelung des End-Kontrollpunkts des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézier-Kurve war, dann ist der Start-Kontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Alle nachfolgenden Paare von Koordinatenpaaren werden 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 der aktuelle Punkt ist, verschoben um dx entlang der x-Achse und dy 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. Der Start-Kontrollpunkt ist die Spiegelung des End-Kontrollpunkts des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézier-Kurve war, dann ist der Start-Kontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Alle nachfolgenden Paare von Koordinatenpaaren werden 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 Kurven, die mit drei Punkten definiert werden:

Startpunkt (aktueller Punkt)

Po = {xo, yo}

Endpunkt

Pn = {xn, yn}

Kontrollpunkt

Pc = {xc, yc} (kontrolliert 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)+

Zeichnet eine quadratische Bézier-Kurve vom aktuellen Punkt zum Endpunkt angegeben durch x,y. Der Kontrollpunkt ist durch x1,y1 angegeben. Alle nachfolgenden Paare von Koordinatenpaaren werden 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 der aktuelle Punkt ist, verschoben um dx entlang der x-Achse und dy entlang der y-Achse. Der Kontrollpunkt ist der aktuelle Punkt (Startpunkt der Kurve), verschoben um dx1 entlang der x-Achse und dy1 entlang der y-Achse. Alle nachfolgenden Paare von Koordinatenpaaren werden 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 angegeben durch x,y. Der Kontrollpunkt ist die Spiegelung des Kontrollpunkts des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézier-Kurve war, ist der Kontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Alle nachfolgenden Koordinatenpaare werden 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 der aktuelle Punkt ist, verschoben um dx entlang der x-Achse und dy entlang der y-Achse. Der Kontrollpunkt ist die Spiegelung des Kontrollpunkts des vorherigen Kurvenbefehls um den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézier-Kurve war, ist der Kontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Alle nachfolgenden Koordinatenpaare werden 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 Anmerkungen
A (rx ry winkel large-arc-flag sweep-flag x y)+

Zeichnet einen Bogenkurve vom aktuellen Punkt zur Koordinate x,y. Das Zentrum der Ellipse, die zum Zeichnen des Bogens verwendet wird, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt:

  • rx und ry sind die beiden Radien der Ellipse;
  • winkel stellt eine Drehung (in Grad) der Ellipse relativ zur x-Achse dar;
  • large-arc-flag und sweep-flag ermöglichen die Auswahl des zu zeichnenden Bogens, da aus den anderen Parametern 4 mögliche Bögen gezeichnet werden können.
    • large-arc-flag ermöglicht die Auswahl eines großen Bogens (1) oder eines kleinen Bogens (0),
    • sweep-flag ermöglicht die Auswahl eines Uhrzeigersinn-Bogens (1) oder eines Gegenuhrzeigersinn-Bogens (0)
Die Koordinate x,y wird zum neuen aktuellen Punkt für den nächsten Befehl. Alle folgenden Parameter-Sets werden als implizite absolute Bogenkurven (A)-Befehle interpretiert.
a (rx ry winkel large-arc-flag sweep-flag dx dy)+

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

  • rx und ry sind die beiden Radien der Ellipse;
  • winkel stellt eine Drehung (in Grad) der Ellipse relativ zur x-Achse dar;
  • large-arc-flag und sweep-flag ermöglichen die Auswahl des zu zeichnenden Bogens, da aus den anderen Parametern 4 mögliche Bögen gezeichnet werden können.
    • large-arc-flag ermöglicht die Auswahl eines großen Bogens (1) oder eines kleinen Bogens (0),
    • sweep-flag ermöglicht die Auswahl eines Uhrzeigersinn-Bogens (1) oder eines Gegenuhrzeigersinn-Bogens (0)
Der aktuelle Punkt verschiebt seine X- und Y-Koordinaten um dx und dy für den nächsten Befehl. Alle folgenden Parameter-Sets werden als implizite relative Bogenkurven (a)-Befehle interpretiert.

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 Anmerkungen
Z, z Schließen Sie den aktuellen Unterpfad, indem Sie den letzten Punkt des Pfads mit dem Anfangspunkt verbinden. Wenn die beiden Punkte an unterschiedlichen Koordinaten liegen, wird eine gerade Linie zwischen diesen beiden Punkten gezeichnet.

Hinweis: Das Erscheinungsbild einer mit ClosePath geschlossenen Form kann sich von dem einer Form unterscheiden, die durch Zeichnen einer Linie zum Ursprung geschlossen wurde, indem einer der anderen Befehle verwendet wurde, da die Linienenden (entsprechend der stroke-linejoin-Einstellung) zusammengefügt werden, anstatt nur an 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

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