在html5中，有許多插件，今天小編就為大家分享眾多插件中的jquery-drawsvg插件。
jquery-drawsvg是什么插件呢？其實，jquery-drawsvg是一款輕量級的使用jQuery來繪制SVG圖形輪廓線路徑動畫的插件。該插件使用jQuery內置的動畫引擎來使SVG元素中path元素產生動畫，其底層實現使用的是stroke-dasharray和stroke-dashoffset屬性。
jquery-drawsvg的特點
1、輕量級，壓縮后小於2kb；
2、使用簡單；
3、支持Easing過渡動畫效果；
jquery-drawsvg的使用方法
使用該SVG圖形輪廓線路徑動畫插件需要引入jQuery和jquery.drawsvg.js文件：
<script src="js/jquery.min.js"></script>
<script src="js/jquery.drawsvg.js"></script>
初始化插件
在頁面DOM元素加載完畢之后，可以通過下面的方法來使SVG圖形生成輪廓線動畫效果。
1、將初始化的對象實例保存為一個變量：
var mySVG = $('#my_svg_element').drawsvg();
2、執行動畫效果了
mySVG.drawsvg('animate');
jquery-drawsvg的配置參數
在使用jquery-drawsvg創建SVG路徑動畫時，常常需要用到一下配置參數：
| 參數 |
類型 |
默認值 |
描述 |
| duration |
Integer |
1000 |
完成每一個路徑動畫的持續時間 |
| stagger |
Integer |
200 |
每一個路徑動畫開始前的延遲時間 |
| easing |
String |
swing |
使用jQuery Easing插件的過渡動畫效果 |
| reverse |
Boolean |
FALSE |
是否反向繪制 |
| callback |
Function |
function() {} |
路徑動畫完成之后的回調函數 |
以上就是html5的jquery-drawsvg插件相關知識，希望對大家在使用這個插件的時候有所幫助。
相關閱讀：《如何通過按鈕控制HTML5頁面的背景音樂？》