GitHub: github.com/icochi/pika…
Gitee: gitee.com/icochi/pika…
Codepen: codepen.io/icochi/pen/…
Bilibili: www.bilibili.com/video/BV1vR…
一、概述
SVG 图形元素一般都会有 fill 属性和 stroke 属性
fill 用于定义填充颜色
stroke 用于定义轮廓颜色。
而图形轮廓除了实线，还可以是虚线，stroke-dasharray 就用来定义虚线轮廓的排列规则。
二、stroke-dasharray
假设我们有一根接近无限长的绳子，需要间隔涂上黑、白两种颜色。
而具体每种颜色分别涂多长，需要参考一个长度清单。
我们从绳子中间开始涂色，在长度清单取值，间隔涂上黑色、白色。
把正方向涂满，再回到中间位置。
以相反的顺序往负方向涂色，
直到整条绳子都涂满。
现在我可以将这条绳子摆成任何形状，然后把不需要的部分盖住。
浏览器的原理可能更复杂，但结果是一样的。
三、stroke-dashoffset
而属性 stroke-dashoffset 就是用来设定，从绳子的什么位置开始摆这个形状。
默认就是从我们涂第一个颜色的位置为起点，数值是几就往后移动多少。
我们可以利用这个原理制作动画。
SVG 路径元素有 getTotalLength() 方法，可以得到路径总长度。
我们把 stroke-dasharray 和 stroke-dashoffset 的值，设定为路径总长度。
然后定义关键帧动画，将 stroke-dashoffset 递减为 0，路径生长动画就完成了。
