snapsvg--关于用来操作svg的js库（1）

来源：互联网发布：linux 中文字体 ttf 编辑：程序博客网时间：2024/05/16 14:29

apsvg.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 attributesbigCircle.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 attributesbigCircle.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 groupdiscs.attr({    fill: "#fff"});

来自搞起博客搞起博客 - snapsvg--关于用来操作svg的js库（1）

0 0