d

d 屬性定義要繪製的路徑。

路徑定義是路徑命令列表，每個命令都由一個命令字母和表示命令引數的數字組成。這些命令在下面詳細介紹。

此屬性與 SVG <path> 元素一起使用。

d 是一個表示屬性，因此也可以用作 CSS 屬性。

示例

html,
body,
svg {
  height: 100%;
}

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

對於<path>，d 是一個字串，其中包含一系列定義要繪製的路徑的路徑命令。

值	<string>
預設值	none
可動畫	是

將 d 用作 CSS 屬性

d 是一個表示屬性，因此也可以使用 CSS 修改它。此屬性接受path() 或 none。

下面的示例展示瞭如何在將滑鼠懸停在元素上時應用新路徑。新路徑與舊路徑相同，但會在心形上新增一條線。

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>

有關 <path> 動畫示例，請參閱 CSS d 屬性參考頁示例。

路徑命令

路徑命令是定義要繪製的路徑的指令。每個命令都由一個命令字母和表示命令引數的數字組成。

SVG 定義了 6 種類型的路徑命令，總共 20 個命令

移至：M，m
線段：L，l，H，h，V，v
三次貝塞爾曲線：C，c，S，s
二次貝塞爾曲線：Q，q，T，t
橢圓弧曲線：A，a
閉合路徑：Z，z

注意：命令區分大小寫。大寫命令指定絕對座標，而小寫命令指定相對於當前位置的座標。

始終可以使用負值作為命令的引數

負角度將是逆時針方向的；
絕對負x 和y 值將解釋為負座標；
相對負x 值向左移動，相對負y 值向上移動。

移至路徑命令

移至指令可以看作是拿起繪圖工具，並將其放置在其他地方——換句話說，移動當前點（P_o；{x_o, y_o}）。在P_o 和新的當前點（P_n；{x_n, y_n}）之間沒有繪製線條。

命令引數注意

命令	引數	注意
M	(`x`, `y`)+	將當前點移至座標 `x`,`y`。任何後續的座標對都將解釋為隱式絕對線段 (`L`) 命令的引數（見下文）。公式：`P_n` = {`x`, `y`}
m	(`dx`, `dy`)+	透過將路徑的最後一個已知位置沿 x 軸移動 `dx`，沿 y 軸移動 `dy` 來移動當前點。任何後續的座標對都將解釋為隱式相對線段 (`l`) 命令的引數（見下文）。公式：`P_n` = {`x_o` + `dx`, `y_o` + `dy`}

(x, y)+

將當前點移至座標 x,y。任何後續的座標對都將解釋為隱式絕對線段 (L) 命令的引數（見下文）。

公式：P_n = {x, y}

(dx, dy)+

透過將路徑的最後一個已知位置沿 x 軸移動 dx，沿 y 軸移動 dy 來移動當前點。任何後續的座標對都將解釋為隱式相對線段 (l) 命令的引數（見下文）。

公式：P_n = {x_o + dx, y_o + dy}

示例

html,
body,
svg {
  height: 100%;
}

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>

線段路徑命令

線段指令根據指定的引數，從當前點（P_o；{x_o, y_o}）繪製一條直線到終點（P_n；{x_n, y_n}）。然後，終點 (P_n) 將成為下一個命令的當前點 (P_o′)。

命令	引數	注意
L	(`x`, `y`)+	從當前點繪製一條直線到由`x`,`y`指定的終點。任何後續的座標對都被解釋為隱式絕對 LineTo (`L`) 命令的引數。公式: `P_o′` = `P_n` = {`x`, `y`}
l	(`dx`, `dy`)+	從當前點繪製一條直線到終點，該終點是當前點沿 x 軸偏移 `dx` 和沿 y 軸偏移 `dy`。任何後續的座標對都被解釋為隱式相對 LineTo (`l`) 命令的引數（見下文）。公式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}
H	`x`+	從當前點繪製一條水平線到終點，該終點由`x`引數和當前點的`y`座標指定。任何後續的值都被解釋為隱式絕對水平 LineTo (`H`) 命令的引數。公式: `P_o′` = `P_n` = {`x`, `y_o`}
h	`dx`+	從當前點繪製一條水平線到終點，該終點由當前點沿 x 軸偏移 `dx` 和當前點的`y`座標指定。任何後續的值都被解釋為隱式相對水平 LineTo (`h`) 命令的引數。公式: `P_o′` = `P_n` = {`x_o` + `dx`, `y_o`}
V	`y`+	從當前點繪製一條垂直線到終點，該終點由`y`引數和當前點的`x`座標指定。任何後續的值都被解釋為隱式絕對垂直 LineTo (`V`) 命令的引數。公式: `P_o′` = `P_n` = {`x_o`, `y`}
v	`dy`+	從當前點繪製一條垂直線到終點，該終點由當前點沿 y 軸偏移 `dy` 和當前點的`x`座標指定。任何後續的值都被解釋為隱式相對垂直 LineTo (`v`) 命令的引數。公式: `P_o′` = `P_n` = {`x_o`, `y_o` + `dy`}

示例

html,
body,
svg {
  height: 100%;
}

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>

三次貝塞爾曲線

三次貝塞爾曲線是使用四個點定義的平滑曲線

起點（當前點）: (P_o = {x_o, y_o})
終點: (P_n = {x_n, y_n})
起點控制點: (P_cs = {x_cs, y_cs})（控制曲線開始處的曲率）
終點控制點: (P_ce = {x_ce, y_ce})（控制曲線結束處的曲率）

繪製完成後，終點 (P_n) 成為下一個命令的當前點 (P_o′)。

命令	引數	注意
C	(`x1`,`y1`, `x2`,`y2`, `x`,`y`)+	從當前點繪製一條三次貝塞爾曲線到由`x`,`y`指定的終點。起點控制點由`x1`,`y1`指定，終點控制點由`x2`,`y2`指定。任何後續的三元組座標對都被解釋為隱式絕對三次貝塞爾曲線 (`C`) 命令的引數。公式 `P_o′` = `P_n` = {`x`, `y`} ; `P_cs` = {`x1`, `y1`} ; `P_ce` = {`x2`, `y2`}
c	(`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+	從當前點繪製一條三次貝塞爾曲線到終點，該終點是當前點沿 x 軸偏移 `dx` 和沿 y 軸偏移 `dy`。起點控制點是當前點（曲線的起點）沿 x 軸偏移 `dx1` 和沿 y 軸偏移 `dy1`。終點控制點是當前點（曲線的起點）沿 x 軸偏移 `dx2` 和沿 y 軸偏移 `dy2`。任何後續的三元組座標對都被解釋為隱式相對三次貝塞爾曲線 (`c`) 命令的引數。公式 `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_cs` = {`x_o` + `dx1`, `y_o` + `dy1`} ; `P_ce` = {`x_o` + `dx2`, `y_o` + `dy2`}
S	(`x2`,`y2`, `x`,`y`)+	從當前點繪製一條平滑三次貝塞爾曲線到由`x`,`y`指定的終點。終點控制點由`x2`,`y2`指定。起點控制點是前一個曲線命令的終點控制點關於當前點的反射。如果前一個命令不是三次貝塞爾曲線，則起點控制點與曲線起點（當前點）相同。任何後續的座標對都被解釋為隱式絕對平滑三次貝塞爾曲線 (`S`) 命令的引數。
s	(`dx2`,`dy2`, `dx`,`dy`)+	從當前點繪製一條平滑三次貝塞爾曲線到終點，該終點是當前點沿 x 軸偏移 `dx` 和沿 y 軸偏移 `dy`。終點控制點是當前點（曲線的起點）沿 x 軸偏移 `dx2` 和沿 y 軸偏移 `dy2`。起點控制點是前一個曲線命令的終點控制點關於當前點的反射。如果前一個命令不是三次貝塞爾曲線，則起點控制點與曲線起點（當前點）相同。任何後續的座標對都被解釋為隱式相對平滑三次貝塞爾曲線 (`s`) 命令的引數。

示例

html,
body,
svg {
  height: 100%;
}

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>

二次貝塞爾曲線

二次貝塞爾曲線是使用三個點定義的平滑曲線

起點（當前點）: P_o = {x_o, y_o}
終點: P_n = {x_n, y_n}
控制點: P_c = {x_c, y_c}（控制曲率）

繪製完成後，終點 (P_n) 成為下一個命令的當前點 (P_o′)。

命令	引數	注意
Q	(`x1`,`y1`, `x`,`y`)+	從當前點繪製一條二次貝塞爾曲線到由`x`,`y`指定的終點。控制點由`x1`,`y1`指定。任何後續的座標對都被解釋為隱式絕對二次貝塞爾曲線 (`Q`) 命令的引數。公式 `P_o′` = `P_n` = {`x`, `y`} ; `P_c` = {`x1`, `y1`}
q	(`dx1`,`dy1`, `dx`,`dy`)+	從當前點繪製一條二次貝塞爾曲線到終點，該終點是當前點沿 x 軸偏移 `dx` 和沿 y 軸偏移 `dy`。控制點是當前點（曲線的起點）沿 x 軸偏移 `dx1` 和沿 y 軸偏移 `dy1`。任何後續的座標對都被解釋為隱式相對二次貝塞爾曲線 (`q`) 命令的引數。公式 `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`} ; `P_c` = {`x_o` + `dx1`, `y_o` + `dy1`}
T	(`x`,`y`)+	從當前點繪製一條平滑二次貝塞爾曲線到由`x`,`y`指定的終點。控制點是前一個曲線命令的控制點關於當前點的反射。如果前一個命令不是二次貝塞爾曲線，則控制點與曲線起點（當前點）相同。任何後續的座標對都被解釋為隱式絕對平滑二次貝塞爾曲線 (`T`) 命令的引數。公式 `P_o′` = `P_n` = {`x`, `y`}
t	(`dx`,`dy`)+	從當前點繪製一條平滑二次貝塞爾曲線到終點，該終點是當前點沿 x 軸偏移 `dx` 和沿 y 軸偏移 `dy`。控制點是前一個曲線命令的控制點關於當前點的反射。如果前一個命令不是二次貝塞爾曲線，則控制點與曲線起點（當前點）相同。任何後續的座標對都被解釋為隱式相對平滑二次貝塞爾曲線 (`t`) 命令的引數。公式 `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}

示例

html,
body,
svg {
  height: 100%;
}

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>

橢圓弧曲線

橢圓弧曲線是定義為橢圓一部分的曲線。用橢圓弧繪製高度規則的曲線有時比用貝塞爾曲線更容易。

命令引數注意

命令	引數	注意
A	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `x` `y`)+	從當前點繪製一條弧曲線到座標`x`,`y`。用於繪製弧線的橢圓的中心根據命令的其他引數自動確定 `rx` 和 `ry` 是橢圓的兩個半徑； `angle` 表示橢圓相對於 x 軸的旋轉（以度為單位）； `large-arc-flag` 和 `sweep-flag` 允許選擇繪製哪條弧線，因為 4 個可能的弧線可以從其他引數中繪製出來。 `large-arc-flag` 允許選擇大弧 (`1`) 或小弧 (`0`)， `sweep-flag` 允許選擇順時針旋轉的弧 (`1`) 或逆時針旋轉的弧 (`0`) 座標 `x`,`y` 成為下一個命令的新當前點。所有後續的引數集都被認為是隱式絕對弧曲線 (`A`) 命令。
a	(`rx` `ry` `angle` `large-arc-flag` `sweep-flag` `dx` `dy`)+	從當前點繪製一條弧曲線到一個點，該點的座標是當前點沿 x 軸偏移 `dx` 和沿 y 軸偏移 `dy` 的座標。用於繪製弧線的橢圓的中心根據命令的其他引數自動確定 `rx` 和 `ry` 是橢圓的兩個半徑； `angle` 表示橢圓相對於 x 軸的旋轉（以度為單位）； `large-arc-flag` 和 `sweep-flag` 允許選擇繪製哪條弧線，因為 4 個可能的弧線可以從其他引數中繪製出來。 `large-arc-flag` 允許選擇大弧 (`1`) 或小弧 (`0`)， `sweep-flag` 允許選擇順時針弧 (`1`) 或逆時針弧 (`0`) 對於下一個命令，當前點的 X 和 Y 座標分別偏移 `dx` 和 `dy`。所有後續的引數集都被認為是隱式相對弧曲線 (`a`) 命令。

(rx ry angle large-arc-flag sweep-flag x y)+

從當前點繪製一條弧曲線到座標x,y。用於繪製弧線的橢圓的中心根據命令的其他引數自動確定

rx 和 ry 是橢圓的兩個半徑；
angle 表示橢圓相對於 x 軸的旋轉（以度為單位）；
large-arc-flag 和 sweep-flag 允許選擇繪製哪條弧線，因為 4 個可能的弧線可以從其他引數中繪製出來。
- large-arc-flag 允許選擇大弧 (1) 或小弧 (0)，
- sweep-flag 允許選擇順時針旋轉的弧 (1) 或逆時針旋轉的弧 (0)

座標 x,y 成為下一個命令的新當前點。所有後續的引數集都被認為是隱式絕對弧曲線 (A) 命令。

(rx ry angle large-arc-flag sweep-flag dx dy)+

從當前點繪製一條弧曲線到一個點，該點的座標是當前點沿 x 軸偏移 dx 和沿 y 軸偏移 dy 的座標。用於繪製弧線的橢圓的中心根據命令的其他引數自動確定

rx 和 ry 是橢圓的兩個半徑；
angle 表示橢圓相對於 x 軸的旋轉（以度為單位）；
large-arc-flag 和 sweep-flag 允許選擇繪製哪條弧線，因為 4 個可能的弧線可以從其他引數中繪製出來。
- large-arc-flag 允許選擇大弧 (1) 或小弧 (0)，
- sweep-flag 允許選擇順時針弧 (1) 或逆時針弧 (0)

對於下一個命令，當前點的 X 和 Y 座標分別偏移 dx 和 dy。所有後續的引數集都被認為是隱式相對弧曲線 (a) 命令。

示例

html,
body,
svg {
  height: 100%;
}

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>

閉合路徑

閉合路徑指令從當前位置繪製一條直線到路徑的第一個點。

命令	引數	注意
Z, z		透過連線路徑的最後一個點與其初始點來關閉當前子路徑。如果這兩個點位於不同的座標，則在這兩個點之間繪製一條直線。

注意：使用ClosePath關閉的形狀的外觀可能與使用其他命令之一繪製到原點的線來關閉的形狀的外觀不同，因為線端是連線在一起的（根據stroke-linejoin設定），而不是僅僅放在相同的座標上。

示例

html,
body,
svg {
  height: 100%;
}

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>

規範

規範
可縮放向量圖形 (SVG) 2 # D屬性
可縮放向量圖形 (SVG) 1.1（第二版） # GlyphElementDAttribute
可縮放向量圖形 (SVG) 1.1（第二版） # D屬性

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

SVG <path> 元素
CSS d 屬性