SVG线条动画实现蚂蚁线

本篇利用到 SVG 的 stroke-dasharray和 stroke-dashoffset两个属性来实现蚂蚁线动画。

stroke-dasharray

可以控制图案描边路径的样式。赋值为字符串，其中逗号用来隔开数字，其实最终传入的是数组。如下图所示，数组里的数字依次表示虚线长度（Dash）和每段虚线之间的间距（Gap），奇数个数字时会以第一个数字衔接最后一个数字周而复始。具体说明如下。

只有一个数字时，表示虚线长度和每段虚线之间的间距相等。如 stroke-dasharray = '10' 表示：dash长10，gap长10，然后重复dash长10，gap长10。

两个数字或者多个数字时，一个表示长度，下一个表示间距。如 stroke-dasharray = '10, 5' 表示：dash长10，gap长5，然后重复dash长10，gap长5；如 stroke-dasharray = '20, 10, 5' 表示：dash长20，gap长10，dash长5，接着是gap长20，dash长10，gap长5，之后开始如此循环。

 

stroke-dashoffset

虚线在原路径下的偏移量。