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路径动画创建的可用配置参数：
参数 类型 默认值 描述 duration Integer 1000 完成每一个路径动画的持续时间 stagger Integer 200 每一个路径动画开始前的延迟时间 easing String swing 使用jQuery Easing插件的过渡动画效果 reverse Boolean false 是否反向绘制 callback Function function() {} 路径动画完成之后的回调函数
如果你喜欢这个插件，那么你可能也喜欢:
HTML5 SVG简单的动态绘制轮廓线条动画插件
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/html5/SVG/201509112557.html
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
