用svg动态绘制图形

    以此前对svg的了解，就是通过rect／circle／line……等绘制规则图形，或者利用path路径来绘制更复杂的图形。但是这种绘制是，当我们写好svg的xml文件嵌入html代码，页面载入的时候，图形是已经绘制完成了的。

例：上面的代码在页面绘制了一个半径为40的圆

    那么如何能够让svg的绘制是动态的呢？也就是我们如何能够让svg的绘制过程一点点的出现，而不是刷新页面图形就已经渲染出来。于是，翻开许久没看的svg文档查看，但是纵览文档几遍，还是没有发现svg存在这样的属性或者方法提供。于是查资料，最后发现svg有个比较重要的属性，名为stroke, 中文软件中称之为“描边”。如上图circle的

strock 属性-->描边颜色；

strock－width 属性-->描边宽度；

等等很多属性，不一一列举，因为今天我们要实现动态绘制的关键属性是:

stroke-dasharray-->表示虚线描边;

stroke-dashoffset-->表示虚线的起始偏移;

例：代码和效果如图所示

     如图绘制了一个半径100的圆，然后通过stroke-dasharray属性让圆成为了50px一段的虚线，而stroke-dashoffset则表示虚线的便宜位置。由此我们就可以想象：当我们把stroke－dasharray设置到足够大，大到比我们绘制的圆的周长还大时，会发生什么呢？那其实绘制的还是一个完整的圆。由此，我们可以通过animation来动态的改变stroke－dashoffset的偏移位置时，这个圆不就动起来了么？that‘s it ！

html css

     如此，我们通过class将stroke跟css属性animation结合起来了，通过控制stroke-dashoffset的偏移位置的改变来实现动态的绘制图形的效果。事实上，这种手法实现了svg的动态绘制“效果”，但我们必须明白的是：这并不是表明svg是我们眼之所见绘制逐渐绘制出来的图形；而是，svg绘制方式本身没有改变，一如前文所言当页面加载的时候就已经完成了绘制，我们所见的动态绘制效果是通过图形虚线段和偏移来实现的svg图形的动画。
      上图css代码中，animation：dash 5s linear infinite;  infinite会让stroke的偏移位置动画一直执行，视觉效果上也就是圆圈一直在被绘制。如果去掉infinite，动画会在第一次绘制之后停止，圆圈也会消失。圆圈消失是因为动画结束后stroke-dashoffset的值会回到1000，偏移位置大于circle的周长，所以circle看不见了，并不是circle不显示了，这点需要注意。

      如果想要动画绘制完成之后保持绘制状态，很简单，只需要把animation中的infinite替换成forwards ，这样当圆圈绘制完毕，动画会一直保持着绘制结束时的状态。于是，我们要的动态绘制效果便达成了！

例：动态绘制图形并保持结束状态