本文主要是介绍制作svg动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
要实现一步一步画出来一个图片，css3做不到吧，除非一张张的图片定时显示。想不到别的招了。现在用的是一个插件，做了一个svg动画。
插件地址：http://lazylinepainter.info/
先用AI做好路径，保存为svg格式的文件。
使用插件，先引入需要的文件：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script>
<script src="jquery.lazylinepainter-1.5.1.js"></script>
demo如下：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lazy Line Painter</title>
<meta name="description" content="A Jquery plugin for SVG path animation">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
body {
background:#fffafa;
cursor: pointer;
}
#demo {
width:400px;
height:400px;
position:absolute;
left:50%;
margin:80px 0 0 -175px;
}
</style>
<sc
这篇关于制作svg动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
