SVG开发之Snap.js教程

Snap的使用

创建SVG

var svg = Snap(100, 100);
svg.paper.circle(50,50,40);
document.getElementById("append").appendChild(svg.node);

 

获取页面上的svg

var svg = Snap("#svg");

 

Paper的使用

通过svg.paper对象可以在svg里进行图形化绘制

画线 

svg.paper.line(x1, y1, x2, y2)

 

画矩形

svg.paper.rect(x,y,width,height,rx,ry)

 

画折线

svg.paper.polyline(x1,y1,x2,y2)
或
svg.paper.polyline([x1,y1,x2,y2])

 

画多边形

svg.paper.polygon(x1,y1,x2,y2);
或
svg.paper.polygon([x1,y1,x2,y2]

 

画圆

svg.paper.circle(cx,cy,r);

 

画椭圆

svg.paper.ellipse(cx,cy,rx,ry)

 

画路径

svg.paper.path(pathString)

 

写文字

svg.paper.text(x,y,text)

 

分组

var svg = Snap("#svg");
var c1 = svg.paper.circle(50, 50, 40);
c2 = svg.paper.rect(150, 10, 120, 80);
var g = svg.paper.g();
g.add(c2, c1);

 

滤镜

var svg = Snap("#svg");
var f = svg.paper.filter('<feGaussianBlur stdDeviation="2"/>');
var c = svg.circle(50, 50, 40).attr({
    filter: f
});

 

画任意元素

var svg = Snap("#svg");
svg.paper.el("circle", {
    cx: 50,
    cy: 50,
    r: 40    
}); // 等同于svg.circle(50, 50, 40);

 

Element的使用

通过svg对象查询对象

查询一个对象  select

//例子：将第一个圆填充红色
var svg = Snap("#svg");
svg.select("circle").attr({
    fill: "#f00"                      
});

 

查询多个对象 selectAll

//例子：将所有的圆填充红色
var svg = Snap("#svg");
svg.selectAll("circle").attr({
    fill: "#f00"                      
});

 

值得一提的是，执行selectAll方法将返回一个Set对象，该对象有一些具体的用法在开发中也经常使用，如遍历，更多使用方法请点击菜单"Set的使用"

获取或设置元素属性 attr

element.attr("width");  //获取属性
element.attr("width":"50");   //设置属性

 

在元素上绑定值

circle.data("state",1);  //为circle元素绑定一个state值
circel.data("state");    //获取circle元素上绑定的state值
circle.removeData("state");  //移除circle元素上绑定的值，如果不传递参数，将移除该元素所有绑定的值

 

元素插入与删除

insertAfter

c1.insertAfter(c2);   //将c1插入到c2后面

 

insertBefore

c1.insertBefore(c2);   //将c1插入到c2前面

 

append

c1.append(c2);   //在c1的最后面插入c2

 

after

c1.after(c2);    //将c1调换到c2后面

 

remove

c1.remove();   //移除元素

 

元素事件处理

鼠标单击事件

c1.click(function(){
    //事件处理代码
});
c1.unclick(); //删除鼠标点击事件

 

鼠标双击事件

c1.dblclick(function(){
    //事件处理代码
});
c1.undblclick(); //删除鼠标双击事件

 

鼠标移入事件

c1.mouseover(function(){
    //事件处理代码
});
c1.unmouseover(); //删除鼠标移入事件

 

鼠标移出事件

c1.mouseout(function(){
    //事件处理代码
});
c1.unmouseout();  //删除鼠标移出事件

 

鼠标拖拽事件

c1.drag();
c1.undrag();

 

设置和获取矩阵变换

c1.transform(); //获取
c1.transform(matrix);  //设置元素的矩阵变换

 

矩阵变换在svg的缩放，平移中将会被频繁用到，值得一看。

其它元素操作

获取父节点

c1.parent();  //获取元素c1的父节点

 

设置动画

Element.animate(attrs, duration, [easing], [callback])

 

更多api参考：

中文：http://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/

英文：http://snapsvg.io/docs/