d

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

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>，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` 指定的終點。任何後續座標對都被解釋為隱式絕對畫線到（`L`）命令的引數。公式： `P_o′` = `P_n` = {`x`, `y`}
l	(`dx`, `dy`)+	從當前點繪製一條線到終點，該終點是當前點沿 x 軸移動 `dx` 且沿 y 軸移動 `dy` 後的點。任何後續座標對都被解釋為隱式相對畫線到（`l`）命令的引數（見下文）。公式： `P_o′` = `P_n` = {`x_o` + `dx`, `y_o` + `dy`}
H	`x`+	從當前點繪製一條水平線到終點，該終點由 `x` 引數和當前點的 `y` 座標指定。任何後續值都被解釋為隱式絕對水平畫線到（`H`）命令的引數。公式： `P_o′` = `P_n` = {`x`, `y_o`}
h	`dx`+	從當前點繪製一條水平線到終點，該終點由當前點沿 x 軸移動 `dx` 和當前點的 `y` 座標指定。任何後續值都被解釋為隱式相對水平畫線到（`h`）命令的引數。公式： `P_o′` = `P_n` = {`x_o` + `dx`, `y_o`}
V	`y`+	從當前點繪製一條垂直線到終點，該終點由 `y` 引數和當前點的 `x` 座標指定。任何後續值都被解釋為隱式絕對垂直畫線到（`V`）命令的引數。公式： `P_o′` = `P_n` = {`x_o`, `y`}
v	`dy`+	從當前點繪製一條垂直線到終點，該終點由當前點沿 y 軸移動 `dy` 和當前點的 `x` 座標指定。任何後續值都被解釋為隱式相對垂直畫線到（`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 座標將根據下一個命令沿 x 軸移動 `dx` 和沿 y 軸移動 `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 座標將根據下一個命令沿 x 軸移動 dx 和沿 y 軸移動 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		透過連線路徑的最後一點和其起始點來閉合當前子路徑。如果兩個點位於不同的座標處，則在這兩個點之間繪製一條直線。

注意： 使用 閉合路徑 閉合的形狀的外觀可能與使用其他命令繪製到原點閉合的形狀不同，因為線端是連線在一起的（根據 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>

規範

規範
Scalable Vector Graphics (SVG) 2 # D屬性
可縮放向量圖形 (SVG) 1.1（第二版） # 字形元素D屬性
可縮放向量圖形 (SVG) 1.1（第二版） # D屬性

瀏覽器相容性

另見

SVG <path> 元素
CSS d 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025 年 9 月 16 日修改。

在 GitHub 上檢視此頁面 • 報告此內容問題