なんてことはない。
<html> <head> <title>Add point to SVG</title> </head> <body> <svg id="svg" width="100" height="100"> <polyline id="polyline" stroke="black" stroke-width="1" fill="none" /> </svg> <button onClick="addPoints()">Add points</button> </body> </html>
というインラインSVGがあったとして、
var points = [ {x:0,y:39},{x:10,y:25},{x:20,y:56},{x:30,y:63},{x:40,y:32},{x:50,y:28}, {x:60,y:74},{x:70,y:17},{x:80,y:64},{x:90,y:36},{x:100,y:5} ];
というデータがあったとしたら
function addPoints(){ // データを回す for(i in points){ // SVGエレメントのcreateSVGPointメソッドでSVGPointを作成 var point = document.getElementById("svg").createSVGPoint(); // 直でプロパティに代入するのってどうなんでしょうねぇ point.x = points[i].x; // x座標の代入 point.y = points[i].y; // y座標の代入 // PolyLineエレメントのpointsアトリビュートにItemをAppendします document.getElementById("polyline").points.appendItem(point); } }
とやればラインが引かれます。意外と早い。もちろん座標(0,0)は左上です。
