要用svg制作复杂或者是高级的动画效果，javascript就必不可少来。今天我们就来学习下svg中的jQuery库Snap.svg这一js库，它的功能跟jQuery在dom的作用差不多，只不过它是专门用来操作svg的。
Snap.svg.js 是一个操纵 SVG 节点/制作 SVG 动画的框架
Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ ) 来做对比最合适不过对比表：
/context(上下文)选择器 事件绑定 节点操作属性操作链式写法
Snap.select(‘circle’)
el.click(...)/el.touchend(...)
after()/remove()/append()
attr()
svg.paper.circle(50,50,40).attr({fill:"#f00"});
document
jQuery(‘div’)
el.click(...)
after()/remove()/append()
attr()
elem.addClass(‘hide’).remove();
在 JQ 中，可操作的最外层 DOM 边界是 document 。而在 Snap 的概念里，可操作的最外层的节点是 svg ，svg 节点的选择、事件绑定都需要在这个上下文里完成。
Element：
这个部分是
节点操作
相关的方法集，也是该类库最基础的部分。
// 选择节点
let svg = Snap("#svg");
svg.select("circle").attr({
fill: "#f00"
let svg = Snap('#svg');
svg.select('circle').click(function() {
// do something
基础语法：http://snapsvg.io/docs/ https://www.zhangxinxu.com/github/demo-Snap.svg/demo/basic/Element.add.php（自行查阅，非常完善）
Paper：
这部分是画SVG图形相关的方法集，这是几乎每个动画框架都有的部分。
SVG 有6种 基本图形 ：矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种：路径(path)，path 是最复杂的一种绘图方式，它可以绘制复杂的图形。
SVG入门笔记：https://www.cnblogs.com/zigood/p/16045973.html
Paper 方法集主要可以绘制6种基本图形（节点），以及文本（节点）、图片（节点）、渐变等。
let svg = Snap("#svg");
svg.paper.circle(50, 50, 40);
let g3 = svg.paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
svg.paper.circle(50, 50, 40).attr({
fill: g3
用 Snap 制作动画
Snap 的做动画主要有两种方式：
使用 Element 里的 animate 方法，Element.animate(attrs, duration, [easing], [callback])
使用 Snap 的静态方法，Snap.animate(from, to, setter, duration, [easing], [callback])，这种方法更通用也更强大，指定开始结束值，setter里面可以放置多个节点的动画
// 动画样例1
let svg = Snap('#svg');
svg.select('circle').animate({r: 100}, 1000, mina.easeout(), function() {
console.log('animation end');
// 动画样例2
let svg = Snap('#svg');
let circle = svg.select('circle');
let rect = svg.select('rect');
Snap.animate(0, 100, function(val) {
circle.attr({r: val});
rect.attr({x: val});
}, 1000, mina.easeout(), function() {
console.log('animation end');
