d
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
d 属性定义了一个要绘制的路径。
路径定义是一个路径命令组成的列表，其中的每一个命令由命令字母和用于表示命令参数的数字组成。命令已在下方列出。
你可以将此属性与以下 SVG 元素一起使用：<path>、<glyph>、<missing-glyph>。
d 是一个表现属性，因此可以用于作为 CSS 属性。
示例
<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> |
|---|---|
| 默认值 | 无 |
| 动画 | 是 |
将 d 作为 CSS 属性
d 是一个表现属性，因此也可以使用 CSS 进行修改。该属性采用 path() 或 none。
下面的示例展示了如何在悬停在元素上时应用新的路径。新的路径与旧的路径相同，但额外增加了一条穿过心形图案的线。
html,
body,
svg {
height: 100%;
}
/* 这条路径会在悬停时显示 */
#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"
);
}
<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 条命令：
备注：命令是大小写敏感的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。
始终可以将负值作为命令的参数：
- 负的角度是逆时针的；
- 绝对坐标中，负的 x 和 y 将被解释为负坐标；
- 相对坐标中，负的 x 值为向左移动，负的 y 值为向上移动。
MoveTo 路径命令
Moveto 指令可以被想象成拎起绘图笔，落脚到另一处。即，从当前位置（Po; {xo, yo}），移动到新的位置（Pn; {xn, yn}），且新的位置与 Po 之间不会绘制线段。
| 命令 | 参数 | 备注 |
|---|---|---|
| M |
(x, y)+
|
将当前位置移动到坐标
公式： Pn = { |
| m |
(dx, dy)+
|
将当前位置沿 x 轴移动
公式： Pn = {xo
+ |
示例
<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>
Lineto 路径命令
Lineto 指令将绘制一条直线段。这个直线段从当前位置（Po; {xo, yo}）移到指定位置（Pn; {xn, yn}）。然后，指定位置（Pn）将变成下一个命令中的当前位置（Po′）。
| 命令 | 参数 | 备注 |
|---|---|---|
| L | (x, y)+ |
在当前位置和指定位置
公式： Po′ =
Pn = { |
| l |
(dx, dy)+
|
在当前位置和指定位置之间绘制一条线段，指定位置为当前位置沿
x 轴偏移
公式： Po′ =
Pn = {xo +
|
| H |
x+
|
在当前位置与指定位置之间绘制一条水平线段。指定位置由
公式： Po′ =
Pn = { |
| h |
dx+
|
在当前位置与指定位置之间绘制一条水平线段。指定位置由当前位置沿
x 轴偏移
公式： Po′ =
Pn = {xo +
|
| V |
y+
|
在当前位置与指定位置之间绘制一条垂直线段。指定位置由
公式： Po′ =
Pn = {xo, |
| v |
dy+
|
在当前位置与指定位置之间绘制一条垂直线段。指定位置由当前位置沿
y 轴偏移
公式： Po′ =
Pn = {xo, yo + |
示例
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<!-- 使用绝对坐标的 LineTo 命令 -->
<path
fill="none"
stroke="red"
d="M 10,10
L 90,90
V 10
H 50" />
<!-- 使用相对坐标的 LineTo 命令 -->
<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)+
|
在当前位置和终点
|
| c |
(dx1,dy1, dx2,dy2, dx,dy)+
|
在当前位置和终点（终点为当前位置沿
x 轴偏移
|
| S |
(x2,y2, x,y)+
|
在当前位置和终点
x,y 之间绘制一条平滑的三次贝塞尔曲线。终点控制点通过
x2,y2 指定。起始控制点是上一条曲线命令的终点控制点在当前位置上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（当前位置）相同。后续成对的坐标序列将被解释为隐式的绝对位置的平滑三次贝塞尔曲线（S）命令的参数。
|
| s |
(dx2,dy2, dx,dy)+
|
在当前位置和终点（终点为当前位置沿
x 轴偏移 dx
以及沿 y 轴偏移 dy
处）之间绘制一条平滑的三次贝塞尔曲线。终点控制点为当前位置沿
x 轴偏移 dx2
以及沿 y 轴偏移 dy2
处。起始控制点是上一条曲线命令的终点控制点在当前位置上的反射点；若上一条命令不是曲线命令，则其与曲线的起始点（当前位置）相同。后续成对的坐标序列将被解释为隐式的相对位置的平滑三次贝塞尔曲线（s）命令的参数。
|
示例
<svg
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- 使用绝对坐标的三次贝塞尔曲线 -->
<path
fill="none"
stroke="red"
d="M 10,90
C 30,90 25,10 50,10
S 70,90 90,90" />
<!-- 使用相对坐标的三次贝塞尔曲线 -->
<path
fill="none"
stroke="red"
d="M 110,90
c 20,0 15,-80 40,-80
s 20,80 40,80" />
<!-- 高亮显示曲线顶点和控制点 -->
<g id="ControlPoints">
<!-- 第一段三次贝塞尔曲线的控制点 -->
<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" />
<!-- 第二段平滑三次贝塞尔曲线的控制点（第一个是隐式的） -->
<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" />
<!-- 曲线顶点 -->
<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>
二次贝塞尔曲线
二次贝塞尔曲线是使用三个点定义的平滑曲线：
绘制后，终点（Pn）将成为下一个命令中的当前位置（Po′）。
| 命令 | 参数 | 备注 |
|---|---|---|
| Q |
(x1,y1, x,y)+
|
在当前位置和终点
|
| q |
(dx1,dy1, dx,dy)+
|
在当前位置和终点（终点为当前位置沿
x 轴偏移
|
| T |
(x,y)+
|
在当前位置和终点
|
| t |
(dx,dy)+
|
在当前位置和终点（终点为当前位置沿
x 轴偏移
|
示例
<svg
viewBox="0 0 200 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- 二次贝塞尔曲线，带有隐式重复 -->
<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" />
<!-- 高亮显示曲线顶点和控制点 -->
<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" />
<!-- 曲线顶点 -->
<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 将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的绝对位置的椭圆曲线（A）命令的参数。
|
| a |
(rx ry
angle large-arc-flag
sweep-flag dx
dy)+
|
在当前位置和指定位置之间绘制一条椭圆曲线。指定位置为当前位置沿
x 轴偏移
dx
以及沿 y 轴偏移后的位置将成为下一个命令中的当前位置。后续参数集合的序列将被解释为隐式的相对位置的椭圆曲线（a）命令的参数。
|
示例
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<!-- 通过弧形标志绘制不同的弧形路径 -->
<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 的设置），而不是仅仅绘制到坐标点上。
示例
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
<!--
一个起点和终点不同的开放形状
-->
<path
stroke="red"
d="M 5,1
l -4,8 8,0" />
<!--
一个起点和终点相同的开放形状
-->
<path
stroke="red"
d="M 15,1
l -4,8 8,0 -4,-8" />
<!--
一个起点和终点不同的闭合形状
-->
<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 |
浏览器兼容性
Loading…