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