Subscribed unsubscribe Subscribe Subscribe

インラインSVGのPolylineにJavaScriptでSVGPointを追加する

なんてことはない。

<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)は左上です。