流动的SVG线条

话不多说，咱先上效果图：

是不是很酷炫，这个效果是用SVG+CSS实现的，现在我们就来一起解构一下这个动画的实现。

---

预备知识

需要掌握的几个SVG的几个标签用法

• <path>

  指令	参数	说明
  M	x y	将画笔移动到点(x,y)
  L	x y	画笔从当前的点绘制线段到点(x,y)
  H	x	画笔从当前的点绘制水平线段到点(x,y0)
  V	y	画笔从当前的点绘制竖直线段到点(x0,y)
  A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	画笔从当前的点绘制一段圆弧到点(x,y)
  C	x1 y1, x2 y2, x y	画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
  S	x2 y2, x y	特殊版本的三次贝塞尔曲线(省略第一个控制点)
  Q	x1 y1, x y	绘制二次贝塞尔曲线到点(x,y)
  T	x y	特殊版本的二次贝塞尔曲线(省略控制点)
  Z	无参数	绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。

  path的指令一共有9种，但实现我们的动画我们只运用了其中两个：A和Z，所以我们这里着重讨论一下A指令！

  绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y

  对于给定两个点（一个起点一个终点）和一个半径，可以画4条弧线。这四条弧线可以按照两种分法：

  1. 按角度分
     • 大于180°的
     • 小于180°的
  2. 按画笔方向分
     • 顺时针方向
     • 逆时针方向

• rx,ry 是弧的半长轴、半短轴长度

• x-axis-rotation 是圆弧旋转角度，是此段弧所在的半长轴与水平方向的夹角。正数代表顺时针转动的角度。

• large-arc-flag 为1 表示大角度弧线，0 代表小角度弧线。

• sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向，0 代表逆时针方向。

• x,y 是弧终端坐标。

• <defs>

  SVG 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现。 你可以在你的视口的任意地方利用 ``元素呈现这些元素。——MDN

  这个标签的用意简单地说就是定义一个绘图模板，以供我们可以在别处直接使用。

  在这里我们可以定义我们的渐变元素：linearGradient。

• <linearGradient>

  linearGradient元素用来定义线性渐变，用于图形元素的填充或描边。——MDN

  一个渐变上的颜色坡度，是用stop元素定义的。

  例如：

  <stop offset="5%" stop-color="#F60" />
  复制代码

  这行代码的意思是：在距离起点位置偏移5%的地方颜色为 #F60。

  我们在引用自己定义的渐变进行填充颜色设置或画笔颜色设置时，仅需要用 url()的方式链入渐变的ID即可，具体如下：

  stroke="url(#linear)"