SVG.js 基礎圖形繪制整理（二）

一、折線

var draw = SVG('svg1').size(300, 300);
//畫折線
//使用字符串點
// var polyline=draw.polyline('0,0 100,50 50,100');
// polyline.fill('none').stroke({width:2});
//使用數組點
var polyline = draw.polyline([
    [0, 0],
    [100, 50],
    [50, 100]
]);
polyline.fill('none').stroke({
    width: 2,
    color: 'red'
});
//獲取節點數組,返回 SVG.PoineArray
var array1 = polyline.array();
console.info(array1);
//修改折線,
polyline.plot([
    [0, 0],
    [100, 50],
    [50, 100],
    [150, 150],
    [200, 200]
]);
//使用動畫
polyline.animate(1000).plot([
    [50, 150],
    [100, 200]
]);

 

二、多邊形

var draw = SVG('svg1').size(300, 300);
//畫多邊形
var polygin = draw.polygon('0,0 100,50 50,100');
polygin.fill('none').stroke({
    width: 1
});
//獲取點數組 SVG.PointArray
var array1 = polygin.array();
console.info(array1);
//修改當前多邊形
// polygin.plot([
//     [0,0], [100,50], [50,100], [150,50], [200,50]
// ]);
//使用動畫
polygin.animate(1000).plot([
    [0, 0],
    [100, 50],
    [50, 100],
    [150, 50],
    [200, 50]
]);

 

三、路徑

var draw = SVG('svg1').size('100%', 300);
//畫 路徑
var path = draw.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100');
//獲取數組點 SVG.PathArray
var array1 = path.array();
console.info(array1);
//獲取路徑的長度
var length = path.length(); //949.8208618164062
console.info(length);
//返回指定路徑位置的點,返回SVG.Point
var point = path.pointAt(105);
console.info(point);
//修改路徑的位置
path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80');
//使用動畫,對於path的動畫，只有相鄰的兩個狀態的點數相同
//也就是只有路徑具有相同的命令（M、C、S等，才會有效果
path.animate(1000)
    .plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
    .loop(true, true);

 

 

更多：

SVG.js 基礎圖形繪制整理（一）

Svg.Js 父類的基礎操作

Svg.Js A標簽，鏈接操作