SVGについて – javascriptでSVGの要素を制御する – propansystem[プロパンシステム]

SVGについて – javascriptでSVGの要素を制御する

javascriptでSVGの要素を動的に変更する方法を試してみます。

HTMLドキュメント内のdivタグにIDを付与し、javascriptでSVGを生成＋描画する方法を試してみます。
簡単なサンプルを書きました。

[js]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="move_line">直線(line)要素を回転させる(この文字をクリックすると動きます)</div>

line.setAttribute(‘id’ , ‘svg_line_id1’);
line.setAttribute(‘x1′ , ’30’);
line.setAttribute(‘y1′ , ’50’);
line.setAttribute(‘x2’ , ‘200’);
line.setAttribute(‘y2’ , ‘150’);
line.setAttribute(‘stroke’, ‘#000000’);

let svgtest_dom = document.getElementById("svg_tag");
svgtest_dom.appendChild(line);

let rotate_value = 0;

let element_move = document.getElementById(‘move_line’);
element_move.addEventListener(‘click’, function() {
let element_svg_line = document.getElementById(‘svg_line_id1’);

rotate_value += 10;
element_svg_line.setAttribute("transform", "rotate(" + rotate_value + ", 100, 100)");

}, false);

</script>

</body>
</html>
[/js]

サーバ上のHTMLはこちら(test1.html)

画面にアクセスして「直線(line)要素を動かす」をクリックすると、svgで描画された直線(line)が回転(rotate)します。
rotate_value をスクリプト内部で定義して、クリックするごとに10づつ値を加算しています。

ポイントとなる点は、14行目～21行目でjavascript内でline要素を生成していますが、
その際に16行目でsvg要素に対してidを付与しています。

こうすることでHTMLドキュメント上では、次のようにline要素にIDが追加されます。
[js]
<line id="svg_line_id1" x1="30" y1="50" x2="200" y2="150" stroke="#000000"></line>
[/js]

このIDをもとに、30行目で
[js]
let element_svg_line = document.getElementById(‘svg_line_id1’);
[/js]

とすることで、getElementByIdでline要素を取得し、プロパティにアクセスすることができています。

また、transformは移動・回転・伸縮・傾斜を制御するプロパティですが、このプロパティ以外を設定することで様々な動きが可能になります。

SVGについて – javascriptでSVGの要素を制御する

コメントを残す