svg animation动画应用

最近在做首页动画的时候，引入有背景色的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,