1. 首页
  2. 开发

snapsvg--关于用来操作svg的js库(1)

Snapsvg.js 是干嘛的?
这个是一个通过js来操作svg元素的javascript库,它的官网是:http://snapsvg.io/,他可以动态的获取元素并修改元素属性等,下面来看下官网给出的示例。

// First lets create our drawing surface out of existing SVG element
// If you want to create new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svg");

那么这就是创建一个最简单的Snap元素了,它会在html页面中id为svg的标签中创建一个svg元素。

而用过svg的都知道,对于svg的操作,基本就是对图元在操作,例如:矩形、圆、椭圆、线条、多边形、折现、路径等这些基本的图形。

再来看几个例子吧。

1.创建一个圆
var s = Snap("#svg");

var bigCircle = s.circle(150, 150, 100);

2.创建圆并设置填充和边线的颜色

// First lets create our drawing surface out of existing SVG element
// If you want to create new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svg");
// Lets create big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default its black, lets change its attributes
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});

3.创建元素组

// First lets create our drawing surface out of existing SVG element
// If you want to create new surface just provide dimensions
// like s = Snap(800, 600);
var s = Snap("#svg");
// Lets create big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default its black, lets change its attributes
bigCircle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
});
// Now lets create another small circle:
var smallCircle = s.circle(100, 150, 70);
// Lets put this small circle and another one into a group:
var discs = s.group(smallCircle, s.circle(200, 150, 70));
// Now we can change attributes for the whole group
discs.attr({
    fill: "#fff"
});
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册