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