HTML5轻量级绘制SVG轮廓线路径动画插件

jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画，其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。该SVG路径动画插件的特点有：

• 轻量级，压缩后小于2kb
• 使用简单
• 支持Easing过渡动画效果

使用方法

使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.drawsvg.js"></script>                
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来使SVG图形生成轮廓线动画效果。

首先将初始化的对象实例保存为一个变量：

var mySVG = $('#my_svg_element').drawsvg();        
              

然后就可以执行动画效果了：

mySVG.drawsvg('animate');                
              

配置参数

下面是该SVG路径动画创建的可用配置参数：