面试官：来说说svg的path吧 svg path 面试 面试题

片头曲：重生_之我……哔！~~~

前景提要

之前说过path是功能强大且复杂所以单开一篇来学习。如果不知道之前的建议先看看之前的文章重生之我是SVG(1)-入门这样有助于后面的学习。

下面可能会用到但是不会详细介绍的2个标签

• use
• g

简介的省流助手

path是基本形状的基础，他可以做很多 amazing 的事情。

简介

path作为最强大的基本形状，强大终于，所有之前提到的基本形状都可以通过path来还原包括但不局限于：线条，曲线，弧形等等。换言之，基本形状就是path的特点版本的快速通道。

path在基础形状只是还可以完成圆滑的曲线绘制。

之前提到过path的一个属性d。接下来会简单的展开d中会用到一些常用的东西。

命令

SVG 定义了六种路径命令类型，一共 20 条命令：

• 移动到：M、m
• 画线至：L、l、H、h、V、v
• 三次方贝塞尔曲线：C、c、S、s
• 二次方贝塞尔曲线：Q、q、T、t
• 椭圆曲线：A、a
• 封闭路径：Z、z

命令是大小写敏感的。大写的命令指定绝对坐标，而小写命令指定相对（于当前位置的）坐标。若之前没有坐标，默认是相对于起点也就是0, 0。

始终可以将负值作为命令的参数：

• 负的角度是逆时针的；
• 绝对坐标中，负的 x 和 y 将被解释为负坐标；
• 相对坐标中，负的 x 值为向左移动，负的 y 值为向上移动。

小Tips

后续出现的小写都是相对定位，比如M和m。

x和y都是绝对定位，二dx和dy都是相对定位哦。

M 命令

M指代MoveTo，可以理解为起点，他本身是不会绘制任何东西，只是将一把“笔”给移动到某个位置，等待后续的“作画”。由于不作画，可能会不是很明显。这里会合并后面直线路径的内容到这里。

MoveTo的命令如下

命令	参数	备注
M	(x, y)+	将当前位置移动到坐标 x,y。后续子坐标序列将被解释为隐式的绝对位置的 LineTo（L）命令的参数（见下方）。
m	(dx, dy)+	将当前位置沿 x 轴移动 dx，沿 y 轴移动 dy。后续子坐标序列将被解释为隐式的相对位置的 LineTo（l）命令的参数（见下方）。

LineTo直线的命令L,V,H如下。展示一下英文意思更好记~

• L -> LineTo
• H -> Horizontal
• V -> vertical

命令	参数	备注
L	(x, y)+	在当前位置和指定位置 x,y 之间绘制一条线段。后续子坐标序列将被解释为隐式的绝对位置的 LineTo（L）命令的参数。
l	(dx, dy)+	在当前位置和指定位置之间绘制一条线段，指定位置为当前位置沿 x 轴偏移 dx 以及沿 y 轴偏移 dy 处。后续子坐标序列将被解释为隐式的相对位置的 LineTo（L）命令的参数。
H	x+	在当前位置与指定位置之间绘制一条水平线段。指定位置由 x 参数和当前位置的 y 坐标指定。后续子序列的值将被解释为隐式的绝对位置的 LineTo（H）命令的参数。
h	dx+	在当前位置与指定位置之间绘制一条水平线段。指定位置由当前位置沿 x 轴偏移 dx 的 x 坐标和当前位置的 y 坐标指定。后续子序列的值将被解释为隐式的相对位置的 LineTo（h）命令的参数。
V	y+	在当前位置与指定位置之间绘制一条垂直线段。指定位置由 y 参数和当前位置的 x 坐标指定。后续子序列的值将被解释为隐式的绝对位置的 LineTo（V）命令的参数。
v	dy+	在当前位置与指定位置之间绘制一条垂直线段。指定位置由当前位置沿 y 轴偏移 dy 的 y 坐标和当前位置的 x 坐标指定。后续子序列的值将被解释为隐式的相对位置的 LineTo（v）命令的参数。

<svg style="border: 1px solid blue">
  <path fill="none" stroke-width="3" stroke="red" d="M 10,10 h 40" />

  <path fill="none" stroke-width="3" stroke="green"
        d="M 100,100 h 10
           m 10,10 h 40
           m 10,10 L 40, 90" />

  <path fill="none" stroke-width="3" stroke="black"
        d="M 40,40 h 10
           m 10,10 h 40
           m 10,10 H 40" />

  <path fill="none" stroke-width="3" stroke="blue"
        d="M 40,40 h 10
           m 10,10 h 40
           m 10,10 L 40, 90" />
</svg>

红色线段

首先红色的线段，很明显，就是将笔移动到绝对定位10,10的位置上，然后向右移动了10个单位，并留下了痕迹，笔的颜色为红色。（为什么是向右向左，由正负数确定的哦。上面有介绍~）

绿色线段

其他的横线都好理解，好奇的就是最后一条斜线。先确定一下起点。

1. （M 100,100）绝对定位100,100，不留移动痕迹
2. （h 10）x轴移动10，所以是110,100，留下移动痕迹
3. （m 10,10）x，y轴都相对移动10，所以是120,110，不留移动痕迹
4. （h 40）x轴移动40，所以是160,110，留下移动痕迹
5. （m 10,10）x，y轴都相对移动10，所以是170,120，不留移动痕迹
6. （L 40, 90）x，y轴移动到40,90，所以是40,90，留下移动痕迹

蓝色和黑色线段

大致一致，主要就是想强调如果重复的，后面的会覆盖之前的，这个和css中相同属性类似。

还有一个需要注意的是黑色的这条线，是往回画的，即使他的正数，但是他当前的位置已经远超40(通过推导得当前的xy轴是？可以抢答~)，所以是往回走的，这个要注意，之前说的正负数之类的，这里还需要注意绝对定位。

L、V、H直线

具体可以看M命令一小节，就在上面

Q、T二次贝塞尔曲线

由于贝塞尔曲线是一个复杂的学科，这里不涉及，具体有需要的可以上网学习，这里只介绍对应的API以及后面的三次贝塞尔曲线也是同理。

命令	参数	备注
Q	(x1,y1, x,y)+	在当前位置和终点 x,y 之间绘制一条二次贝塞尔曲线。