前端实现看到一个网页的效果很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; 300px;height:200px;"></div> <div class="init_pie" style="margin-left:200px;margin-top:50px; background-color: red; 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="100%;text-align:center;">testtext</div>）则不能确点描绘的是文字的边框而是div块状元素的边框了
后续会添加更多的样式效果请关注我的github