SVG.js 基础图形绘制整理(一)

一、矩形

//指定width和height 画矩形
//返回rect对象
var draw = SVG('svg1').size(300, 300);
var rect = draw.rect(100, 100);
//设置radius,指定rx,ry
//rect.radius(30);
rect.radius(30, 3);

SVG.js 基础图形绘制整理(一)

二、圆形

var draw = SVG('svg1').size(300, 300);
draw.circle(100).fill('red');
//指定半径画圆
var circle = draw.circle(100);
//修改半径大小
circle.radius(75);
circle.move(50, 50)

SVG.js 基础图形绘制整理(一)

三、椭圆形

var draw = SVG('svg1').size(300, 300);
//指定width,height 画椭圆
var ellipse = draw.ellipse(200, 100);
//修改椭圆的半径
setTimeout(function () {
ellipse.radius(75, 100);
ellipse.move(50, 50);
}, 1000);

SVG.js 基础图形绘制整理(一)

四、直线

var draw = SVG('svg1').size(300, 300);
//画直线
var line = draw.line(0, 0, 100, 150).stroke({
width: 1
});
//修改直线宽度
line.stroke({
width: 2
});
//获取当前直线的数组
var array = line.array();
console.info(array);
//修改直线,指定数组或字符串
//line.plot(50,30,100,150);
//line.plot('50,30,100,150');
//指定SVG.PointArray 数组
line.plot([
[50, 30],
[100, 150]
]);
var points = new SVG.PointArray([
[50, 30],
[100, 150]
]);
//line.plot(points);
//使用动画,直线的位置移动3秒
line.animate(3000).plot(points);

SVG.js 基础图形绘制整理(一)

更多:

Svg.Js 父类的基础操作

Svg.Js A标签,链接操作

Svg.Js 简介(转)

上一篇:详解Python中的__init__和__new__(静态方法)


下一篇:转:几款免费的图表js插件