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);

 

二、圓形

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

三、橢圓形

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);

四、直線

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 A標簽，鏈接操作

Svg.Js 簡介(轉)