前言

最近在开发大屏看板，UI让做一个这样的效果

本来也简单，UI给个git动图放上就好了。但是UI给的图有四五十m，实在是太大了。后来想到了svg路径动画，之前从来没有搞过，就研究了下，由于svg没怎么研究过，水平有限，做成的效果差了些。

实现

原理

svg图片本质上就是由一些标签代码组成的，可以像html一样给某些标签添加动画。

这里需要用到Stroke 属性和渐变的知识，具体用法见：

SVG Stroke 属性
SVG 渐变 - 线性

stroke-dasharray
strokedasharray属性用于创建虚线，一般要提供两组数据

path{stroke-dasharray:20 10;
}

第一个值可以理解为实线宽度，第二个值理解为间隔宽度。效果如下：

stroke-dashoffset
用于修改虚线的偏移量

示例1

示例2

这与我们想要的是有区别的，我们需要的是显示一部分线，而不是全部显示。这里我们可以修改stroke-dasharray 属性来实现

stroke-dasharray:10 100;

这样我们在改变偏移量时，只需要保证显示第一段就可以实现只显示一部分线条

示例3

到这里起始就差不多了，案例中的线条是有渐变色的，我们可以给线条加上渐变色

最终效果