published on in 前端技术
tags: Snap Svg

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    

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