最近在做首页动画的时候，引入有背景色的 mp4 动图时，动图的背景色不能很好的融入相同背景色的不同浏览器和不同显示器，出现了下图这种尴尬的情况：
动图的边界始终有根分界线，即使调整了背景色适应这个边界，也总是会在不同的显示器中显示出不同程度的分界线。于是我决定用代码实现整个动图。
制作这样一套动图，只靠前端攻城狮是有点费劲的，毕竟需要很多线图的绘制，没有专业的 UI 支持很难设计出标准漂亮的动图。拿我这次做的动图来说
整体由 css 操作 png 和 svg 搭建流转路线构成首先需要 UI 同学把整体布局，距离、素材规划出来然后就是根据整体布局和距离把素材扑上去最最重要的是 svg 绘制的流动线路
1.svg path
这种线路图，UI 同学一般绘制完都是向下面这样的：
<path class=”st0″ d=”M208,224.6c-0.5,0-1-0.1-1.5-0.4c-0.9-0.5-1.5-1.5-1.5-2.6l-0.6-36.3c0-0.6,0.4-1,1-1c0,0,0,0,0,0
c0.5,0,1,0.4,1,1l0.6,36.3c0,0.5,0.4,0.8,0.5,0.9c0.2,0.1,0.6,0.2,1,0l67.5-40.3c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2,0-0.6-0.5-0.9
l-82.9-49.8c-0.9-0.5-1.5-1.5-1.5-2.6c0-1.1,0.6-2,1.5-2.6l98.5-58.6c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2-0.1-0.6-0.5-0.9l-50-29.2
c-0.9-0.5-1.5-1.5-1.5-2.5c0-1,0.5-2,1.4-2.6l9.4-6c0.5-0.3,1.1-0.2,1.4,0.3s0.2,1.1-0.3,1.4l-9.4,6c-0.4,0.3-0.5,0.7-0.5,0.9
s0.1,0.6,0.5,0.8l50,29.2c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-98.5,58.6c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9
l82.9,49.8c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-67.5,40.3C209.1,224.5,208.5,224.6,208,224.6z”/>
<path class=”st0″ d=”M324.9,158.7c-0.2,0-0.4,0-0.5-0.1l-64.2-39.3c-0.9-0.5-1.4-1.5-1.4-2.6c0-1.1,0.5-2,1.5-2.6l99-59.4
c0.4-0.3,0.5-0.7,0.5-0.9s0-0.6-0.5-0.9l-71.3-42.7c-0.5-0.3-0.6-0.9-0.3-1.4s0.9-0.6,1.4-0.3l71.3,42.7c0.9,0.5,1.5,1.5,1.5,2.6
s-0.5,2-1.5,2.6l-99,59.4c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9l64.2,39.3c0.5,0.3,0.6,0.9,0.3,1.4
C325.6,158.6,325.2,158.7,324.9,158.7z”/>
总之就是很长很乱的一段。。。这是因为 AI 绘制 svg 的时候每一条线都是由两条线和一些弯曲的规则（贝塞尔曲线）组成。建议直接用 UI 同学给的 svg 编辑器打开后直接引用，因为”贝塞尔曲线“真的不是随便就能 Hold 住的。。。下面附上 svg path 指令
对比上面的代码可以看出路径 d 由 M 作为路径起始坐标点开始由 z 结束这段闭合曲线。直线由 L 或者 l 绘制，分别代表绝对路径和相对路径曲线由贝塞尔曲线规则绘制 C(C x1, y1, x2, y2, x,y) 为了更方便展现出贝塞尔的奥义，举下图说明：
然鹅，真正使用指令徒手敲代码画图的时候才真正发现，这就是个坑啊。。。毕竟我们还要测量距离、像素，找起点、终点，最头疼的是还要用贝塞尔绘制折线曲率。。。有这时间还不如去学学 UI 了???? 当然，无权阻止大神们的探索。。。
所以踩了这些坑的我还是直接用了 UI 绘制好的 svg
绘制
直接上 path
<svg>
<path />
<svg>
首先这样肯定是可以绘制出线的，但是我们的目的不光是要画出线，还要在线上加动画效果
动画
我是用一小段渐变色的流动来表示数据的流动，所以首先需要给线段 – 渐变色
在 SVG 中，有两种主要的渐变类型：
线性渐变（LinearGradient）
放射性渐变 | 径向渐变（RadialGradient）
区别在于：
使用径向渐变可以定义渐变中心原点的坐标，半径，更方便加在线上。直接上代码：
<radialGradient cx=”194.1″ cy=”128.9″ r=”20″ gradientUnits=”userSpaceOnUse” id=”linearGradientCordPath1″>
<stop stop-color=”#ffff00″ offset=”0%”></stop>
<stop stop-color=”#ffff00″ offset=”25%”></stop>
<stop stop-color=”#22A1FF” offset=”100%”></stop>
</radialGradient>
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。大致效果如下：
然后我们需要让这段渐变的颜色动起来
<animation>
<animate attributeName=”cx” values=”252.3;242.6;292.6;194.1;277;205;205.4;” dur=”3s” calcMode=”linear” repeatCount=”indefinite”></animate>
<animate attributeName=”cy” values=”25;34.1;68.5;128.9;183.9;221.6;184.3;” dur=”3s” calcMode=”linear” repeatCount=”indefinite”></animate>
attributeName 要变化的元素属性名称分别为 x 轴和 y 轴方向，values 是每一个经过的关键值坐标点，可以直接用 Adobe AI 打开 svg 在线上直接拿到关键点的坐标分别写入 cx,cy 的 value 中，调整 dur 时间，加上 indefinite 循环：