效果图如下:

就像是一圈圈蚂蚁在它身上爬。。。。。emmmmm奇特的比喻
fill:none;可以让图形不被填充,如果不添加这一属性,则默认填充颜色是black,这个效果
发现stroke这一系列属性都很有意思啊,填充啊透明度和stroke-linecap,但是这个效果用的最多的还是stroke-dasharray和stroke-dashoffset。
stroke-miterlimit表示描边相交(锐角)的表现方式。默认大小是4. 什么斜角转斜面的角度损耗之类的意思,值越大,损耗越小。具体干嘛的,我自己也不确定。大家可查查其他资料。stroke-dasharray表示虚线描边。可选值为:none,,inherit. 其中,none表示不是虚线;为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。stroke-dashoffset表示虚线的起始偏移。可选值为:,,inherit. 百分比值,长度值,继承。stroke-opacity表示描边透明度。默认是1.
特别佩服作者列举的一个生动形象的例子:
一根火腿肠12厘米,要在上面画虚线,虚线间隔有15厘米,如果没有dashoffset,则火腿肠前面15厘米会被辣椒酱覆盖!实际上只有12厘米,因此,我们看到的是整个火腿肠都有辣椒酱。现在,dashoffset也是15厘米,也就是虚线要往后偏移15厘米,结果,辣椒酱要抹在火腿肠之外,也就是火腿肠上什么辣椒酱也没有。如果换成上面的直线SVG,也就是直线看不见了。我们把dashoffset值逐渐变小,则会发现,火腿肠上的辣椒酱一点一点出现了,好像辣椒酱从火腿肠根部涂抹上去一样。










