svg的strokeDasharray和strokeDashoffset

这一块知识在前端中有时会用到，比如说制作描边图展示的时候。

strokeDasharray

它指的是svg图中，每一条边的描边的线长，也可以说是线宽。可以设置一个值，或者两个以及两个以上的值。

设置一个值的时候，它是指虚线的长和虚线之间的距离相等，都等于那个值。
设置两个值的时候，它是分别指虚线和的宽和虚线之间的距离。
两个以上，则宽、间距、宽循环。

strokeDashoffset

它指的是描边虚线的起点偏移量。如果说边的起点和终点为A、B，描边的起点为C、D，那么偏移量就是AC的长度。AC==0的时候，描边刚好和边。反之，只看得见部分描边。

描边图展示

strokeDasharray设置为边长，strokeDashoffset也设置为边长。此时描边虚线的长度等于边长，且虚线部分刚好完全偏移起点。svg边的部分刚好是虚线和虚线之间的距离（也就是空白），只要通过动画让偏移慢慢归零，即可实现虚线缓缓顺着边出现，即描边动画。