Snap.svg

svg是建立交互性、并有分辨率无关的矢量图形的好方法，而snap.svg可以像jQuery操作Dom一样方便的操作svg图形。

Snap.svg的官方网站是snapsvg.io,个人感觉上的文档写得并不好，随便把所有的方法都列出来了，但是很多看完并不知道如何使用，参数应该怎么传，所以下面就介绍一下一些常用的方法。

画简单的图形：

Paper.rect(x, y, width, height, [rx], [ry]);//画矩形，x、y坐标，width、height长宽，rx、ry为圆角
Paper.circle(x, y, r);//画圆，x、y圆心坐标，r半径
Paper.ellipse(x, y, rx, ry);//画椭圆，x、y圆心坐标，rx、ry焦半径
Paper.image(src, x, y, width, height);//插入图片，src路径，x、y坐标，width、height长宽

不规则图形可以使用Paper.path，命令和原生svg几乎相同，多了一个R：

//M = moveto
//L = lineto
//H = horizontal lineto
//V = vertical lineto
//C = curveto
//S = smooth curveto
//Q = quadratic Belzier curve
//T = smooth quadratic Belzier curveto
//A = elliptical Arc
//Z = closepath
//R = catmull-rom curveto
Paper.path("M0,0C0,20,20,20,20,0");

平移、旋转、缩放，有两种方法：

var m = new Snap.Matrix();
m.scale(1.2,1.2);//x、y方向都放大1.2倍
m.translate(10,10);//平移到(10,10)
m.rotate(10,20,20);//绕着(20,20)顺时针旋转10度
element.transform(m);//将变换应用到element上

element.transform("s1.2,1.2t10,10r10,20,20");//直接用字符串形式

样式设置：

element.attr({fill:"black"});
element.node.style.fontSize = "20px";//有些样式可以通过node.style来设置

添加事件：

element.click(function(){});
element.node.addEventListener("click",function(){});//也可以用node

简单的介绍就到这里，其他内容请参考官方文档（不懂的只能百度谷歌了）。