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 上查看此页面 • 报告此内容问题