d
该属性定义了一个要遵循的路径。
用法环境
分类 | 路径描述属性 |
|---|---|
值 | <List of movements> |
动画特性 | Yes |
规范性文件 | SVG 1.1 (2nd Edition) |
d 的属性是包含一系列路径描述的字符串。这些路径是以下指令的组合：
- moveto
- lineto
- curveto
- arcto
- closepath
这些说明被合并在一个字符串中。命令区分大小写; 大写命令将其参数指定为绝对位置，而小写命令指定相对于当前位置的点。总是可以指定负值作为命令的参数：负角度将是逆时针，绝对 x 和 y 位置将被视为负坐标，负相对 x 值将向左移动，并且负相对 y 价值观将向上移动。
moveto
moveto 指令可以被认为是拿起绘图仪，并将其放置在其他地方。在前一点和指定点之间没有画线。使用 moveto 命令打开所有路径是一种很好的做法，因为如果没有初始 moveto 命令，将以起始点执行命令，无论以前哪里发生，都可能导致未定义的行为。
语法：
M x,y其中 x 和 y 分别是绝对坐标，水平和垂直坐标m dx,dy其中 dx 和 dy 分别是相对于当前位置的距离，右边和下边
示例 :
- 绝对定位在 x = 50，y = 100：
<path d="M50,100..." /> - 向右移动50，向下移动100：
<path d="m50,100..." />
lineto
与 moveto 指令不同，lineto 指令将画出一条直线。该行从当前位置移动到指定位置。通用 lineto 命令的语法是“L x，y”或“l dx，dy”，其中 x 和 y 是绝对坐标，dx 和 dy 分别是右边和下边的距离。还有说明 H 和 V，它们指定水平和垂直运动。它们的语法与 L 相同，它们的小写版本 h 和 v 指定相对坐标，如小写的l所示，但它们只采用一个参数。
curveto
curveto 命令指定贝塞尔曲线。有两种类型的贝塞尔曲线：立方和二次。二次贝塞尔曲线是立方贝塞尔曲线的特例，因为每一端的控制点是相同的。二次贝塞尔曲线的语法是“Q cx，cy x，y”或“q dcx，dcy，dx，dy”。cx和cy是控制点的绝对坐标，dcx 和 dcy 分别是控制点 x 和 y 方向上的距离。x 和 y 是终点的绝对坐标，dx 和 dy 分别是终点的 x 和 y 方向上的距离。
Cubic Bezier 曲线遵循与 Quadratic 相同的概念，除了有两个控制点需要担心。Cubic Bezier 曲线的语法是“C c1x，c1y c2x，c2y x，y”或“c dc1x，dc1y dc2x，dc2y dx，dy”，其中 c1x，c1y 和 c2x，c2y 是控件的绝对坐标分别指向初始点和结束点。dc1x，dc1y，dc2x，dc2y 都相对于初始点而不是终点。dx 和 dy 分别是向右和向下的距离。
对于平滑的贝塞尔曲线链，可以使用 T 和 S 命令。它们的语法比其他 curveto 命令简单，因为它假定第一个控制点是前一个曲线的第二个控制点的反射，即当前起始点（它也是前一个终点）。如果没有先前的第二控制点，则当前的第一控制点是前一个终点。对于绝对方向和相对方向，T 的语法分别是“T x，y”或“t dx，dy”，并用于创建二次贝塞尔曲线。S 用于创建立方贝塞尔曲线，语法为“S cx，cy x，y”或“s dcx，dcy dx，dy”，其中 d / cx，d / cy 表示第二个控制点。
最后，通过在初始命令之后多次指定所有参数，所有的贝塞尔曲线命令都可以制作成“polybezier”。因此，以下两个命令将创建完全相同的路径：
<path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" />
<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" />
arcto
有时将路径描述为椭圆曲线而不是贝塞尔曲线更容易。为此，路径中支持 arcto 命令。弧的中心是从其他变量计算出来的。arcto 的声明相对复杂：“A rx，ry xAxisRotate LargeArcFlag，SweepFlag x，y”。为了解构，rx 和 ry 分别是 x 和 y 方向上的半径。LargeArcFlag 的值为0或1，并确定是否绘制可能的最小（0）或最大（1）弧。SweepFlag 可以是0或1，并确定是否应以顺时针方向（1）或逆时针方向（0）扫掠圆弧。x 和 y 是目标坐标。虽然 xAxisRotate 应该改变X轴，相对于当前的参考框架，但似乎这个参数对 Gecko 7 没有影响。
closepath
closepath 命令将绘制一条直线，从当前位置到路径中的第一个点。这是最简单的命令，并且不需要参数。它将采用到起点的最短线性路径，如果它们在途中与其他路径相交。语法是“Z”或“z”，两者都会以相同的方式作出反应。
由于线条端点连接在一起（根据笔划线连接设置），而使用其他命令之一绘制线条到原点，闭合的形状的外观可能与闭合的形状不同，只是被放置在相同的坐标。
元素
以下元素可以使用d属性：
<path><glyph>
另外，这里的规则同样适用于<animate>动画路径。
注意
原点（坐标0,0）通常是上下文的左上角。但是<glyph>元素的起源在其信箱的左下角。
一个逗号用于分隔两个连续的数字。逗号在其他地方是不允许的。
简单的 SVG 路径示例
HTML内容
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="150px">
<path fill="#F7931E" stroke="#000" d="M37,17v15H14V17z M50,0H0v50h50z"/>
</svg>结果
为了说明d="M37,17v15H14V17H37z M50,0H0v50h50z"真正意义，让我们来讨论字符串的每个部分：
d=" M37,17 || v15 || H14 || V17 || z // M50,0 || H0 || v50 || h50 || z"d=- 该属性包含组成整个 svg 的字符串。
M37,17M是 moveto 的缩写。大写 'M' 表示绝对值，'m' 表示相对值。路径从矩形内右上角的坐标开始。37在 x 轴上将路径的起点位置设置为原点右侧 37px17在 y 轴上将路径的起始位置从原点向下设置为 17px
- V15
- v 代表垂直线。F大写 V使用绝对的 y 轴坐标，而小写的v使用相对距离。
- 该指令从当前位置绘制一条垂直线 15px。这意味着你正在画一条 15px 的坐标（37,32）。
H14- H 代表水平，并使用绝对坐标，因为它是大写。
- 从
v15,结尾开始，绘制一条水平线到绝对x轴坐标14.这将使您处于坐标（14,32）。
V17- 从绘制的最后一条线开始，并绘制垂直线到y轴坐标17.这使您坐标（14,17）。
z- 小写字母 z 和大写字母 Z 都关闭一条路径，将一条直线绘制到路径的起??点，并将其两端连接在一起。
- 空间
- 空间分隔下一个路径，这将使外部正方形。
M50,0- 从位置（50,0）开始。
H0- 画一条水平线到（0,0）
v50- 从（0,0）开始画一条垂直线50px。这绘制了一条线（（0,50））。
h50- 从（0,50）开始画一条50px长的水平线。这画了一条线（50,50）。
z- 小写字母 z 和大写字母 Z 都关闭一条路径，将一条直线绘制到路径的起??点，并将其两端连接在一起。
请记住，SVG 像素不一定与屏幕或文档像素相同。在上面的示例中，50px SVG 框显示为150px宽，因此每个 SVG 像素长度和高度都是三个文档像素。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
