d

该属性定义了一个要遵循的路径。

用法环境

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,17
  • M是 moveto 的缩写。大写 'M' 表示绝对值，'m' 表示相对值。路径从矩形内右上角的坐标开始。
  • 37 在 x 轴上将路径的起点位置设置为原点右侧 37px
  • 17 在 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 像素长度和高度都是三个文档像素。