一、折線

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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的SVG.js 基础图形绘制整理（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。