[CSS] svg线条动画

1. svg坐标系统

对于所有元素，SVG使用的坐标系统或者说网格系统，
和Canvas用的差不多（所有计算机绘图都差不多）。

这种坐标系统是：
以页面的左上角为(0,0)坐标点，坐标以像素为单位，
x轴正方向是向右，y轴正方向是向下。

我们使用div+css可以实现相似的效果，

2. viewBox

svg的viewBox属性，
可以截取svg中的一块矩形区域，然后居中展示在原来的svg中。

viewBox = "开始x坐标 开始y坐标 截取宽度 截取高度"

例如，我们将上面的图形，从0,0坐标点开始，截取宽高为50,50的一块区域。

viewBox允许截取比原来svg区域更大的范围，
这样可以实现缩小原svg内图形的效果。
例如，我们截取宽高为200,200的一块矩形区域。

3. line

其中，x1,y1表示初始坐标，x2,y2表示终止坐标。

4. stroke-dasharray

通过给line设置stroke-dasharray，可以绘制虚线。

其中，stroke-dasharray: 10;相当于stroke-dasharray: 10 10;，
表示绘制line的时候，以实线10px，空白10px的间距来画虚线。

下图是指定，stroke-dasharray: 10 2;的效果。

5. stroke-dashoffset

通过给line设置stroke-dashoffset，
可以指定绘制虚线时的起始位置偏移。

下图向前偏移了9px，

以上代码指定了stroke-dashoffset: 9;，则向前偏移9px再开始绘制虚线。
可以看到实线部分，只剩下了1px。

6. 动画

结合stroke-dasharray和stroke-dashoffset可以给line增加描线效果的动画。

我们使用了css动画，动态改变了stroke-dashoffset的值，从100到0，
stroke-dashoffset: 100;时，刚好红线处于虚线的空白间隙中，
而随着stroke-dashoffset减少到0，偏移值越来越小，前面的实线部分就慢慢显现出来了。

注：
stroke-dasharray: 100;是经过计算过的，我们的例子中，线条的长度刚好是100。

---

参考

mdn: 坐标定位
mdn: stroke-dasharray
mdn: stroke-dashoffset
mdn: viewBox