d
=

**`d`** 属性定义了一个要绘制的路径。

路径定义是一个路径命令组成的列表，其中的每一个命令由命令字母和用于表示命令参数的数字组成。命令已在下方列出。

你可以将此属性与以下 SVG 元素一起使用：`<path>`、`<glyph>`、`<missing-glyph>`。

`d` 是一个表现属性 (en-US)，因此可以用于作为 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>** |
| 默认值 | *无* |
| 动画 | 是 |

glyph
-----

**警告：** 自 SVG2 起，`<glyph>` 已被弃用，不应该继续使用。

对于 `<glyph>`，`d` 是一个字符串，其中包一组路径命令，用于定义字形（glyph）的轮廓形状。

|  |  |
| --- | --- |
| 值 | **<string>** |
| 默认值 | *无* |
| 动画 | 是 |

**备注：** 原点（坐标 `0`,`0`）通常是上下文的*左上角*。但 `<glyph>` 元素的原点是其字形框的*左下角*。

missing-glyph
-------------

**警告：** 自 SVG2 起，`<missing-glyph>` 已被弃用，不应该继续使用。

对于 `<missing-glyph>`，`d` 是一个字符串，其中包一组路径命令，用于定义字形（glyph）的轮廓形状。

|  |  |
| --- | --- |
| 值 | **<string>** |
| 默认值 | *无* |
| 动画 | 是 |

将 d 作为 CSS 属性
-------------

`d` 是一个表现属性 (en-US)，因此也可以使用 CSS 进行修改。该属性采用 path() (en-US) 或 `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>
```

路径命令
----

路径命令是对要绘制的路径的说明。每一个命令由代表命令的字母和代表参数的数字组成。

SVG 定义了六种路径命令类型，一共 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* 值为向上移动。
### MoveTo 路径命令

*Moveto* 指令可以被想象成拎起绘图笔，落脚到另一处。即，从*当前位置*（*Po*; {*xo*, *yo*}），移动到*新的位置*（*Pn*; {*xn*, *yn*}），且新的位置与 *Po* 之间不会绘制线段。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| M | (`x`, `y`)+ | 
 将*当前位置*移动到坐标
 `x`,`y`。后续子坐标序列将被解释为隐式的绝对位置的
 LineTo（`L`）命令的参数（*见下方*）。

**公式：** Pn = {`x`, `y`} |
| m | (`dx`, `dy`)+ | 
 将*当前位置*沿 x 轴移动
 `dx`，沿 y 轴移动
 `dy`。后续子坐标序列将被解释为隐式的相对位置的
 LineTo（`l`）命令的参数（*见下方*）。


**公式：** Pn = {xo
 + `dx`, yo + `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>
```


* 位于绝对位置 x=50, y= 100：`<path d="M50,100..." />`
* 往右移 50，往下移 100：`<path d="m50,100..." />`
### Lineto 路径命令

*Lineto* 指令将绘制一条直线段。这个直线段从*当前位置*（*Po*; {*xo*, *yo*}）移到*指定位置*（*Pn*; {*xn*, *yn*}）。然后，*指定位置*（*Pn*）将变成下一个命令中的*当前位置*（*Po′*）。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| L | (`x`, `y`)+ | 
 在*当前位置*和*指定位置*
`x`,`y` 之间绘制一条线段。后续子坐标序列将被解释为隐式的绝对位置的
 LineTo（`L`）命令的参数。


**公式：** Po′ =
 Pn = {`x`, `y`}
  |
| l | (`dx`, `dy`)+ | 
 在*当前位置*和*指定位置*之间绘制一条线段，*指定位置*为*当前位置*沿
 x 轴偏移 `dx` 以及沿
 y 轴偏移 `dy`
 处。后续子坐标序列将被解释为隐式的相对位置的
 LineTo（`L`）命令的参数。


**公式：** Po′ =
 Pn = {xo +
 `dx`, yo + `dy`}
  |
| H | `x`+ | 
 在*当前位置*与*指定位置*之间绘制一条水平线段。*指定位置*由
 `x` 参数和*当前位置*的
 `y` 坐标指定。后续子序列的值将被解释为隐式的绝对位置的
 LineTo（`H`）命令的参数。


**公式：** Po′ =
 Pn = {`x`, yo}
  |
| h | `dx`+ | 
 在*当前位置*与*指定位置*之间绘制一条水平线段。*指定位置*由*当前位置*沿
 x 轴偏移 `dx`
 的 `x` 坐标和*当前位置*的
 `y` 坐标指定。后续子序列的值将被解释为隐式的相对位置的
 LineTo（`h`）命令的参数。


**公式：** Po′ =
 Pn = {xo +
 `dx`, yo}
  |
| V | `y`+ | 
 在*当前位置*与*指定位置*之间绘制一条垂直线段。*指定位置*由
 `y` 参数和*当前位置*的
 `x` 坐标指定。后续子序列的值将被解释为隐式的绝对位置的
 LineTo（`V`）命令的参数。


**公式：** Po′ =
 Pn = {xo, `y`}
  |
| v | `dy`+ | 
 在*当前位置*与*指定位置*之间绘制一条垂直线段。*指定位置*由*当前位置*沿
 y 轴偏移 `dy`
 的 `y` 坐标和*当前位置*的
 `x` 坐标指定。后续子序列的值将被解释为隐式的相对位置的
 LineTo（`v`）命令的参数。


**公式：** Po′ =
 Pn = {xo, yo + `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>
```

三次贝塞尔曲线
-------

*三次**贝塞尔曲线*是使用四个点定义的平滑曲线：

起始点（当前位置）

(*Po* = {*xo*, *yo*})

终点

(*Pn* = {*xn*, *yn*})

起始控制点

(*Pcs* = {*xcs*, *ycs*})（控制在起点附近的曲线的曲率）

终点控制点

(*Pce* = {*xce*, *yce*})（控制在终点附近的曲线的曲率）

绘制后，*终点*（*Pn*）将成为下一个命令中的*当前位置*（*Po′*）。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| C | (`x1`,`y1`, `x2`,`y2`, `x`,`y`)+ | 
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条三次贝塞尔曲线。*起始控制点*通过
 `x1`,`y1`
 指定，而*终点控制点*通过
 `x2`,`y2` 指定。后续的三元组坐标序列将被解释为隐式的绝对位置的三次贝塞尔曲线（`C`）命令的参数。


公式：
Po′ = Pn = {`x`, `y`} ;Pcs = {`x1`, `y1`} ;Pce = {`x2`, `y2`}
 |
| c | (`dx1`,`dy1`, `dx2`,`dy2`, `dx`,`dy`)+ | 
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条三次贝塞尔曲线。*起始控制点*为*当前位置*沿 x 轴偏移
 `dx1` 以及沿
 y 轴偏移 `dy1`
 处；而*终点控制点*为*当前位置*沿 x 轴偏移
 `dx2` 以及沿
 y 轴偏移 `dy2`
 处。后续的三元组坐标序列将被解释为隐式的相对位置的三次贝塞尔曲线（`c`）命令的参数。


公式：

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pcs = {xo +
 `dx1`, yo + `dy1`} ;Pce = {xo +
 `dx2`, yo + `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 xlink:href="#ControlPoints" x="100" />
</svg>
```

### 二次贝塞尔曲线

*二次**贝塞尔曲线*是使用三个点定义的平滑曲线：

起始点（当前位置）

*Po* = {*xo*, *yo*}

终点

*Pn* = {*xn*, *yn*}

控制点

*Pc* = {*xc*, *yc*}（控制曲率）

绘制后，*终点*（*Pn*）将成为下一个命令中的*当前位置*（*Po′*）。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| Q | (`x1`,`y1`, `x`,`y`)+ | 
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条二次贝塞尔曲线。*控制点*通过
 `x1`,`y1`
 指定。后续成对的坐标序列将被解释为隐式的绝对位置的二次贝塞尔曲线（`Q`）命令的参数。


**公式：**
Po′ = Pn = {`x`, `y`} ;Pc = {`x1`, `y1`}
 |
| q | (`dx1`,`dy1`, `dx`,`dy`)+ | 
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条二次贝塞尔曲线。*控制点*为*当前位置*（曲线的起始点）沿
 x 轴偏移 `dx1`
 以及沿 y 轴偏移 `dy1`
 处。后续成对的坐标序列将被解释为隐式的相对位置的二次贝塞尔曲线（`q`）命令的参数。


公式：

Po′ = Pn = {xo
 + `dx`, yo + `dy`} ;Pc = {xo +
 `dx1`, yo + `dy1`}

 |
| T | (`x`,`y`)+ | 
 在*当前位置*和*终点*
`x`,`y` 之间绘制一条平滑的二次贝塞尔曲线。*控制点*是上一条曲线命令的*控制点*在*当前位置*上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（*当前位置*）相同。后续的坐标序列将被解释为隐式的绝对位置的平滑二次贝塞尔曲线（`T`）命令的参数。


公式：
Po′ = Pn = {`x`, `y`}
 |
| t | (`dx`,`dy`)+ | 
 在*当前位置*和*终点*（*终点*为*当前位置*沿
 x 轴偏移 `dx`
 以及沿 y 轴偏移 `dy`
 处）之间绘制一条平滑的二次贝塞尔曲线。*控制点*是上一条曲线命令的*控制点*在*当前位置*上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（*当前位置*）相同。后续的坐标序列将被解释为隐式的相对位置的平滑二次贝塞尔曲线（`t`）命令的参数。


公式：

Po′ = Pn = {xo
 + `dx`, yo + `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="rgba(0,0,0,.2)" 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="rgba(0,0,0,.2)"
 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="rgba(0,0,0,.2)"
 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 xlink:href="#SmoothQuadraticDown" x="60" />
    <use xlink:href="#SmoothQuadraticUp" x="60" />
    <use xlink: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 轴偏移 `dx`
 以及沿 y 轴偏移后的位置将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的相对位置的椭圆曲线（`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>
```

ClosePath
---------

*ClosePath* 命令将从*当前位置*绘制一条直线到路径中的第一个点。

| 命令 | 参数 | 备注 |
| --- | --- | --- |
| 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>
```

规范
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # DProperty |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # GlyphElementDAttribute |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) # DAttribute |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.