前端實現看到一個網頁的效果很cool（參考https://tympanus.net/Development/SVGDrawingAnimation/index2.html）,決定自己去實現以下這個效果，並且封裝成一個js插件供大家簡單去實現該效果；
插件地址 https://github.com/l4819266/WebInitAnimation
目前，已經實現了三種效果（描繪容器的邊框，描繪線狀統計圖樣式，描繪餅狀統計圖樣式）；
使用方法：
1、首先引入jquery和svg.js
2、然后引入svg.webInitAnimation.js
3、定義自己的dom元素
4、選擇想要繪制的樣式添加到class屬性中
如下
<html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="svg.js"></script> <script type="text/javascript" src="svg.webInitAnimation.js"></script> </head> <body class="bg-fill" style="background-color:#07263B;margin:0;padding:0;"> <div style="margin-top:20px;text-align:center;"> <span class="init_border">fdsgfsdgfdsg</span> </div> <span class="init_border" style="margin-left:100px;">fdsafdas</span> <div class="init_chartline init_border" style="margin-left:400px;margin-top:50px; background-color: red; width:300px;height:200px;"></div> <div class="init_pie" style="margin-left:200px;margin-top:50px; background-color: red; width:300px;height:300px;"></div> </body> </html>
用法解釋：
首先如果你想要背景色填充動畫樣式，在body節點添加bg-fill類，並且設置body的背景色，如果不需要該效果則不需添加樣式和class
邊框描繪：選擇你想要描繪邊框的dom在class中添加init_border類即可，
線狀統計圖樣式：選擇你需要繪制該樣式的dom添加init_chartline類即可，
餅狀統計圖樣式：選擇你需要繪制該樣式的dom添加init_pie類即可
以上的樣式效果可以在同一dom上添加，最好是init_border和其他樣式配合使用
注意：
在邊框描繪樣式中如果選擇的是文字的邊框，請確保選擇的dom是完整包圍文字的，最好選擇行內元素，塊狀元素（例如<div style="width:100%;text-align:center;">testtext</div>）則不能確點描繪的是文字的邊框而是div塊狀元素的邊框了
后續會添加更多的樣式效果請關注我的github