路径命令

路径命令是对要绘制的路径的说明，每一个命令由代表命令的字母和代表参数的数字组成，SVG 定义了六种路径命令类型，一共 20 条命令。

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

不难发现命令是区分大小写的（即大小写敏感），大写的命令指定 绝对坐标，小写命令指定 相对坐标（相对当前位置的）。

命令中的数字可以使用负数形式，只不过代表的意思不同：

对角度而言负数表示是 逆时针
在 绝对坐标 中，-x 和 -y 均表示为负坐标
在 相对坐标 中，-x 值为向左移动，负的 -y 值为向上移动

MoveTo 命令

顾名思义，就是指从 当前点 移动到 下一点，即从 当前位置（Po {xo, yo}） 移动到 新位置（Pn {xn, yn}），并且 Pn 与 Po 之间不会绘制连接线：

M 绝对坐标，将当前位置移动到坐标 x,y
m 相对坐标，将当前位置沿 x 轴移动 dx，沿 y 轴移动 dy，即Pn = { xo + dx, yo + dy }

<svg>
    <path
      fill="none"
      stroke="#f40"
      stroke-width="10"
      d="M 10,10 h 30
      m  0,10 h 30
      m  0,10 h 30
      M 40,20 h 30
      m  0,10 h 30
      m  0,10 h 30
      m  0,10 h 30
      m  -30,10 h 30
      m  -60,10 h 30
      m  -60,10 h 30
      m  -60,10 h 30
      m  -60,10 h 30"
    />
</svg>
复制代码

Lineto 命令

Lineto 指令将绘制一条直线段，从 当前位置 （Po { xo, yo }） 移到 **指定位置（Pn { xn, yn }），指定位置（Pn） 将变成下一个命令中的 当前位置（Po）：

L 在当前位置和指定位置 x,y 之间绘制 一条线段

即 Po = Pn = { x, y }

I 在当前位置和指定位置 x,y 之间绘制 一条线段，指定位置为当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处

即 Po = Pn = { xo + dx, yo + dy }

H 在当前位置与指定位置之间绘制一条 水平线段，指定位置由 x 参数和当前位置的 y 坐标指定

即 Po = Pn = { x, yo }

h 在当前位置与指定位置之间绘制一条 水平线段，指定位置由当前位置沿 x 轴偏移 dx 的 x 坐标和当前位置的 y 坐标指定

即 Po = Pn = { xo + dx, yo }

V 在当前位置与指定位置之间绘制一条 垂直线段，指定位置由 y 参数和当前位置的 x 坐标指定

即 Po = Pn = { xo, y }

v 在当前位置与指定位置之间绘制一条 垂直线段，指定位置由当前位置沿 y 轴偏移 dy 的 y 坐标和当前位置的 x 坐标指定

即 Po = Pn = { x, yo + dy }

<svg>
    <path
      fill="none"
      stroke="#f40"
      stroke-width="10"
      d="M 10,10
      L 100,100
      V 10
      H 30"
    />
</svg>
复制代码

三次贝塞尔曲线

三次贝塞尔曲线 是使用 四个点 定义的平滑曲线，绘制完成后 终点（Pn） 将成为下一个命令中的 当前位置（Po）：

起始点（当前位置） — 第一个点
(Po = {xo, yo})
终点 — 第二个点
(Pn = {xn, yn})
起始控制点 — 第三个点
(*Pcs* = {xcs, ycs})（控制在起点附近的曲线的曲率）
终点控制点 — 第四个点
(Pce = {xce, yce})（控制在终点附近的曲线的曲率）

其对应的命令如下：

在 当前位置 和 终点 x,y 之间绘制一条三次贝塞尔曲线，起始控制点 通过 x1,y1 指定，终点控制点 通过 x2,y2 指定
参数形式为 (x1,y1, x2,y2, x,y)，各点表示 Po = Pn = {x, y}； Pcs = {x1, y1}；Pce = {x2, y2}

在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条三次贝塞尔曲线，起始控制点 为当前位置沿 x 轴偏移 dx1、沿 y 轴偏移 dy1 处；终点控制点 为当前位置沿 x 轴偏移 dx2、沿 y 轴偏移 dy2 处
参数形式为 (dx1,dy1, dx2,dy2, dx,dy)，各点表示 Po = Pn = {xo + dx, yo + dy} ；Pcs = {xo + dx1, yo + dy1} ；Pce = {xo + dx2, yo + dy2}

在 当前位置 和 终点 x,y 之间绘制一条平滑的三次贝塞尔曲线，终点控制点 通过 x2,y2 指定，起始控制点 是上一条曲线命令的终点控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
参数形式为 (x2,y2, x,y)

在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条平滑的三次贝塞尔曲线，终点控制点 为当前位置沿 x 轴偏移 dx2、沿 y 轴偏移 dy2 处；起始控制点 是上一条曲线命令的终点控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
参数形式为 (dx2,dy2, dx,dy)

<svg>
    <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"
    />
</svg>
复制代码

二次贝塞尔曲线

二次贝塞尔曲线是使用 三个点 定义的平滑曲线，绘制完成后** 终点（Pn）** 将成为下一个命令中的 当前位置（Po） ：

起始点（当前位置）
Po = {xo, yo} — 第一个点
终点
Pn = {xn, yn} — 第二个点
控制点 — 第三个点
Pc = {xc, yc}（控制曲率）

其对应命令如下：

在 当前位置 和 终点 x,y 之间绘制一条二次贝塞尔曲线，控制点 通过 x1,y1 指定
参数形式为 (x1,y1, x,y)，各点表示 Po = Pn = {x, y} ；Pc = {x1, y1}

在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条二次贝塞尔曲线，控制点 为当前位置（曲线的起始点）沿 x 轴偏移 dx1、沿 y 轴偏移 dy1 处
参数形式为 (dx1,dy1, dx,dy)，各点表示 Po = Pn = {xo + dx, yo + dy} ；Pc = {xo + dx1, yo + dy1}

在 当前位置 和 终点 x,y 之间绘制一条平滑的二次贝塞尔曲线，控制点 是上一条曲线命令的控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
参数形式为 (x, y)，各点表示 Po = Pn = {x, y}

在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条平滑的二次贝塞尔曲线，控制点 是上一条曲线命令的控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
参数形式为 (dx, dy)，各点表示 Po = Pn = {xo + dx, yo + dy}

<svg>
    <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"
    />
</svg>
复制代码

椭圆曲线

椭圆曲线 实际上就是用来定义为椭圆的一部分的曲线，当需要绘制 高度规则的曲线 时使用 椭圆曲线 相比于 贝塞尔曲线 会更容易：

在 当前位置 和 坐标 x,y 之间绘制一条椭圆曲线，用于绘制圆弧的椭圆中心根据命令的其他参数确定，参数形式 (rx ry angle large-arc-flag sweep-flag x y)
坐标 x,y 将成为下一个命令中的当前位置

在 当前位置 和 指定位置 之间绘制一条椭圆曲线，指定位置 为当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处，用于绘制圆弧的椭圆中心根据命令的其他参数确定，参数形式 (rx ry angle large-arc-flag sweep-flag dx dy)
坐标 dx,dy 将成为下一个命令中的当前位置

A 和 a 共同参数表示如下：

rx 和 ry 是椭圆的两个半径
angle 表示椭圆相对于 x 轴的旋转角度
large-arc-flag 和 sweep-flag 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线

large-arc-flag 允许选择一个 大弧线（1）或一个 小弧线（0）
sweep-flag 允许选择一条 顺时针 旋转的弧线（1）或一条 逆时针 旋转的弧线（0）

<svg stroke-width="4">
    <path
      fill="none"
      stroke="red"
      d="M 150,50
       A 150 50 10 1 0 14,10"
    />
    <path
      fill="none"
      stroke="lime"
      d="M 150,50
       A 150 50 10 1 1 14,10"
    />
    <path
      fill="none"
      stroke="purple"
      d="M 150,50
       A 150 50 10 0 1 14,10"
    />
    <path
      fill="none"
      stroke="pink"
      d="M 150,50
       A 150 50 10 0 0 14,10"
    />
 </svg>
复制代码

ClosePath

ClosePath 命令将从 当前位置 绘制一条直线到路径中的 第一个点，其对应的命令为 Z 或 z，没有什么参数，并且大小写不敏感。

<svg stroke-width="3">
    <path
      fill="pink"
      stroke="red"
      d="M 150,50
       l -10,50 80,0
       z"
    />
</svg>
复制代码

基础案例实践

由于文章篇幅有限，第一个案例会说得细一些，后续的案例就不再一一详细分析了。

环形进度条

这个应该是比较常见的一个需求了，但是如果不让使用组件库你打算怎么实现？

要是没有了解 SVG 之前，恐怕连这么个看似简单的效果都不好实现，但是现在我们可以借助 SVG 来实现，或者我们先来看看组件库是怎么实现的：

以上是 ElementUi 中的实现，没错就是 SVG ，现在你知道其实你项目里一直都有在用 SVG 了吧！

简单分析

整体可以看成是 两个圆形 重叠，因此可以通过 <circle> 元素实现（也可以选择 <path>元素，如上述给出的例图）
<circle> 元素默认是会绘制整个圆，但是进度条肯定不是一开始就是 100% 的，因此可以使用 stroke-dashoffset 属性 来将完整的圆变成部分的，但是直接使用 stroke-dashoffset 属性是不会生效的，因为它要配合 stroke-dasharray 属性 一起来使用

stroke-dashoffset：指定 dash 模式到 路径开始 的距离
stroke-dasharray：控制用来描边的 点划线 的图案范式，其实你完全可以结合 border: 1px solid dash 来理解，就是用于将一段连续的内容变成非连续的，设置了它就开启了 dash 模式

静态实现

<svg stroke-width="5">
    <!-- 背景圆形 -->
    <circle cx="150" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
    <!-- 进度条 -->
    <circle
      class="process-circle"
      cx="150"
      cy="75"
      r="50"
      stroke="#20a0ff"
      transform="rotate(-90 150 75)"
      fill="none"
      stroke-dasharray="314"
      stroke-dashoffset="314"
    ></circle>
</svg>
复制代码

用了那么久的 SVG，你还没有入门吗？（二）