Snap.svg 基本知识入门

janily

pattern等属性。

开始使用Snap

``var s = Snap("#svg");``

• 圆，创建圆需要三个参数：X(x轴的坐标)，Y(y轴的坐标)，半径。具体可以参考文档circle API

• 矩形，需要四个参数：X，Y，宽，高。文档地址rect API

``````    //创建床半径为80的圆
var circle = s.circle(90,120,80);
// 宽为210de的juxing
var square = s.rect(210,40,160,160);
//椭圆
var ellipse = s.ellipse(460,120,50,80);
``````

DEMO

SVG attributes

``````    circle.attr({
fill: 'coral',
stroke: 'coral',
strokeOpacity: .3,
strokeWidth: 10
});

square.attr({
fill: 'lightblue',
stroke: 'lightblue',
strokeOpacity: .3,
strokeWidth: 10
});

ellipse.attr({
fill: 'mediumturquoise',
stroke: 'mediumturquoise',
strokeOpacity: .2,
strokeWidth: 10
});
``````

DEMO

分组操作图形

Snap为我们提供来分组操作group这一强大的功能，顾名思义，使用它我们可以把多个图形编成一组，使之变为一个图形。

``````    var circle_1 = s.circle(200, 200, 140);
var circle_2 = s.circle(150, 200, 140);

var circles = s.group(circle_1, circle_2);

circles.attr({
fill: 'coral',
fillOpacity: .6
});``````

DEMO

``````    var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);

var circles = s.group(circle_1, circle_2);

var ellipse = s.ellipse(275, 220, 170, 90);

circles.attr({
fill: 'coral',
fillOpacity: .6,
});

ellipse.attr({
opacity: .4
});
``````

DEMO

``````    circles.attr({
fill: 'coral',
fillOpacity: .6,
})

ellipse.attr({
fill: '#fff',
opacity: .8
});
``````

DEMO

让图形动起来

``````    function blink(){
ellipse.animate({ry:1)},220,function(){
ellipse.animate({ry:90},300);
)}
};
``````

``````    setInterval(blink,3000);
``````

``````    var circle_1 = s.circle(300, 200, 140);
var circle_2 = s.circle(250, 200, 140);

// 编组图形

var circles = s.group(circle_1, circle_2);

var ellipse = s.ellipse(275, 220, 170, 90);

// 填充颜色并使用蒙版

circles.attr({
fill: 'coral',
fillOpacity: .6,
});

ellipse.attr({
fill: '#fff',
opacity: .8
});

// 眨眼动画让椭圆的垂直的半径从1增加到90

ellipse.animate({ry:1}, 220, function(){
ellipse.animate({ry: 90}, 300);
});
};

// 每三秒执行一次动画

``````

DEMO

开源

Snap.svg使开源的，意味着我们可以免费使用它来开发。

How to Manipulate and Animate SVG With Snap.svg

462 声望
84 粉丝
0 条评论