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 d Attribut definiert einen Pfad, der gezeichnet werden soll.

Eine Pfaddefinition ist eine Liste von Pfadbefehlen, wobei 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 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 Sie möglicherweise einen neuen Pfad beim Hover über ein Element anwenden. 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 <path>-Animation siehe 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 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 für einen Befehl anzugeben:

  • negative Winkel werden im 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 Aufnehmen des Zeicheninstruments gedacht werden, um es woanders abzulegen—mit anderen Worten, Sie bewegen den aktuellen Punkt (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 x,y. Jegliches nachfolgende Koordinatenpaar(e) wird als Parameter für implizite absolute LineTo (L) Befehl(e) interpretiert (siehe unten).

Formel: Pn = {x, y}

m (dx, dy)+

Bewegen Sie den aktuellen Punkt, indem Sie die zuletzt bekannte Position des Pfades um dx entlang der x-Achse und um dy entlang der y-Achse verschieben. Jegliches nachfolgende Koordinatenpaar(e) wird als Parameter für implizite relative LineTo (l) Befehl(e) 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 Anmerkungen
L (x, y)+

Zeichnen Sie eine Linie vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben ist. Jegliches nachfolgende Koordinatenpaar(e) wird als Parameter für implizite absolute LineTo (L) Befehl(e) interpretiert.

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

l (dx, dy)+

Zeichnen Sie 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. Jegliches nachfolgende Koordinatenpaar(e) wird als Parameter für implizite relative LineTo (l) Befehl(e) interpretiert (siehe unten).

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

H x+

Zeichnen Sie eine horizontale Linie vom aktuellen Punkt zum Endpunkt, der durch den Parameter x und den aktuellen Punkt y Koordinate angegeben ist. Jeglicher nachfolgende Wert wird als Parameter für implizite absolute horizontale LineTo (H) Befehl(e) interpretiert.

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

h dx+

Zeichnen Sie 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 angegeben ist. Jeglicher nachfolgende Wert wird als Parameter für implizite relative horizontale LineTo (h) Befehl(e) interpretiert.

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

V y+

Zeichnen Sie eine vertikale Linie vom aktuellen Punkt zum Endpunkt, der durch den Parameter y und den aktuellen Punkt x Koordinate angegeben ist. Jegliche nachfolgende Werte werden als Parameter für implizite absolute vertikale LineTo (V) Befehl(e) interpretiert.

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

v dy+

Zeichnen Sie 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 angegeben ist. Jeglicher nachfolgende Wert wird als Parameter für implizite relative vertikale LineTo (v) Befehl(e) 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 mit vier Punkten:

Startpunkt (aktueller Punkt)

(Po = {xo, yo})

Endpunkt

(Pn = {xn, yn})

Startkontrollpunkt

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

Endkontrollpunkt

(Pce = {xce, yce}) (steuert die Krümmung in der Nähe des Endpunktes der Kurve)

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

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

Zeichnen Sie eine kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, angegeben durch x,y. Der Startkontrollpunkt ist angegeben durch x1,y1 und der Endkontrollpunkt ist angegeben durch x2,y2. Jegliches nachfolgende Triplet von Koordinatenpaaren wird als Parameter für implizite absolute kubische Bézier-Kurve (C) Befehl(e) interpretiert.

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

Zeichnen Sie 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 Startkontrollpunkt ist der aktuelle Punkt (Startpunkt der Kurve), verschoben um dx1 entlang der x-Achse und dy1 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. Jegliches nachfolgende Triplet von Koordinatenpaaren wird als Parameter für implizite relative kubische Bézier-Kurve (c) Befehl(e) interpretiert.

Formeln:
Po′ = Pn = {xo + dx, yo + dy} ;
Pcs = {xo + dx1, yo + dy1} ;
Pce = {xo + dx2, yo + dy2}
S (x2,y2, x,y)+ Zeichnen Sie eine glatte kubische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben ist. Der Endkontrollpunkt ist angegeben durch x2,y2. Der Startkontrollpunkt ist die Spiegelung des Endkontrollpunkts des vorherigen Kurvenbefehls über den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézier-Kurve war, ist der Startkontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Jegliche nachfolgende Paar(e) von Koordinatenpaaren werden als Parameter für implizite absolute glatte kubische Bézier-Kurven (S) Befehle interpretiert.
s (dx2,dy2, dx,dy)+ Zeichnen Sie 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 Endkontrollpunkt ist der aktuelle Punkt (Startpunkt 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 über den aktuellen Punkt. Wenn der vorherige Befehl keine kubische Bézier-Kurve war, ist der Startkontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Jegliche nachfolgende Paar(e) 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 Kurvendefinitionen mit drei Punkten:

Startpunkt (aktueller Punkt)

Po = {xo, yo}

Endpunkt

Pn = {xn, yn}

Kontrollpunkt

Pc = {xc, yc} (steuert Krümmung)

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

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

Zeichnen Sie eine quadratische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben ist. Der Kontrollpunkt ist angegeben durch x1,y1. Jegliches nachfolgende Paar(e) von Koordinatenpaaren wird als Parameter für implizite absolute quadratische Bézier-Kurve (Q) Befehl(e) interpretiert.

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

Zeichnen Sie 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. Jegliches nachfolgende Paar(e) von Koordinatenpaaren wird als Parameter für implizite relative quadratische Bézier-Kurve (q) Befehl(e) interpretiert.

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

Zeichnen Sie eine glatte quadratische Bézier-Kurve vom aktuellen Punkt zum Endpunkt, der durch x,y angegeben ist. Der Kontrollpunkt ist die Spiegelung des Kontrollpunkts des vorherigen Kurvenbefehls über den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézier-Kurve war, ist der Kontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Jegliche nachfolgende Paar(e) von Koordinatenpaaren werden als Parameter für implizite absolute glatte quadratische Bézier-Kurven (T) Befehle interpretiert.

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

Zeichnen Sie 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 über den aktuellen Punkt. Wenn der vorherige Befehl keine quadratische Bézier-Kurve war, ist der Kontrollpunkt derselbe wie der Startpunkt der Kurve (aktueller Punkt). Jegliche nachfolgende Paar(e) von Koordinatenpaaren 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 zu zeichnen als mit einer Bézier-Kurve.

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

Zeichnen Sie eine Bogenkurve vom aktuellen Punkt zur Koordinate x,y. Der Mittelpunkt der Ellipse, die verwendet wird, um den Bogen zu zeichnen, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt:

  • rx und ry sind die beiden Radien der Ellipse;
  • angle repräsentiert eine Rotation (in Grad) der Ellipse relativ zur x-Achse;
  • large-arc-flag und sweep-flag ermöglichen es Ihnen, auszuwählen, welchen Bogen Sie zeichnen möchten; 4 mögliche Bögen können mit den anderen Parametern gezeichnet werden.
    • large-arc-flag ermöglicht die Wahl zwischen großem Bogen (1) oder kleinem Bogen (0),
    • sweep-flag ermöglicht die Wahl zwischen im Uhrzeigersinn drehendem Bogen (1) oder gegen den Uhrzeigersinn drehendem Bogen (0)
Die Koordinate x,y wird zum neuen aktuellen Punkt für den nächsten Befehl. Alle nachfolgenden Parametersätze werden als implizite absolute Bogekurve (A) Befehle betrachtet.
a (rx ry angle large-arc-flag sweep-flag dx dy)+

Zeichnen Sie eine Bogenkurve vom aktuellen Punkt zu einem Punkt, für den die Koordinaten diejenigen des aktuellen Punktes sind, verschoben um dx entlang der x-Achse und dy entlang der y-Achse. Der Mittelpunkt der Ellipse, die verwendet wird, um den Bogen zu zeichnen, wird automatisch basierend auf den anderen Parametern des Befehls bestimmt:

  • rx und ry sind die beiden Radien der Ellipse;
  • angle repräsentiert eine Rotation (in Grad) der Ellipse relativ zur x-Achse;
  • large-arc-flag und sweep-flag ermöglichen es Ihnen, auszuwählen, welchen Bogen Sie zeichnen möchten; 4 mögliche Bögen können mit den anderen Parametern gezeichnet werden.
    • large-arc-flag ermöglicht die Wahl zwischen großem Bogen (1) oder kleinem Bogen (0),
    • sweep-flag ermöglicht die Wahl zwischen im Uhrzeigersinn drehendem Bogen (1) oder gegen den Uhrzeigersinn drehendem Bogen (0)
Der aktuelle Punkt erhält seine X- und Y-Koordinaten, die für den nächsten Befehl um dx und dy verschoben werden. Alle nachfolgenden Parametersätze werden als implizite relative Bogekurve (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 Anmerkungen
Z, z Schließen Sie den aktuellen Unterpfad, indem Sie den letzten Punkt des Pfades mit seinem Anfangspunkt verbinden. 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 anders sein als das einer Form, die durch das Zeichnen einer Linie zur Herkunft geschlossen wird, mit einem anderen Befehl, da die Linienenden miteinander verbunden werden (entsprechend der stroke-linejoin Einstellung), anstatt nur an den gleichen 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

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

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