SVG
属性 | Attributes

d

d

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

用法环境

分类 路径描述属性
<List of movements>
动画特性Yes
规范性文件SVG 1.1 (2nd Edition)

d 的属性是包含一系列路径描述的字符串。这些路径是以下指令的组合:

  • moveto

这些说明被合并在一个字符串中。命令区分大小写; 大写命令将其参数指定为绝对位置,而小写命令指定相对于当前位置的点。总是可以指定负值作为命令的参数:负角度将是逆时针,绝对 x 和 y 位置将被视为负坐标,负相对 x 值将向左移动,并且负相对 y 价值观将向上移动。

moveto

moveto 指令可以被认为是拿起绘图仪,并将其放置在其他地方。在前一点和指定点之间没有画线。使用 moveto 命令打开所有路径是一种很好的做法,因为如果没有初始 moveto 命令,将以起始点执行命令,无论以前哪里发生,都可能导致未定义的行为。

语法:

  • M x,y 其中 x 和 y 分别是绝对坐标,水平和垂直坐标

示例 :

  • 绝对定位在 x = 50,y = 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>

另外,这里的规则同样适用于<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"

请记住,SVG 像素不一定与屏幕或文档像素相同。在上面的示例中,50px SVG 框显示为150px宽,因此每个 SVG 像素长度和高度都是三个文档像素。