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 属性