SVGについて – javascriptでSVGの要素を制御する
javascriptでSVGの要素を動的に変更する方法を試してみます。
HTMLドキュメント内のdivタグにIDを付与し、javascriptでSVGを生成＋描画する方法を試してみます。
簡単なサンプルを書きました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<svg id="svg_tag" width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg"></svg>
<div id="move_line">直線(line)要素を回転させる(この文字をクリックすると動きます)</div>
<script type="text/javascript">
let line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
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>
画面にアクセスして「直線(line)要素を動かす」をクリックすると、svgで描画された直線(line)が 回転(rotate)します。
rotate_value をスクリプト内部で定義して、クリックするごとに10づつ値を加算しています。
ポイントとなる点は、14行目～21行目でjavascript内でline要素を生成していますが、
その際に16行目でsvg要素に対してidを付与しています。
こうすることでHTMLドキュメント上では、次のようにline要素にIDが追加されます。
<line id="svg_line_id1" x1="30" y1="50" x2="200" y2="150" stroke="#000000"></line>
このIDをもとに、30行目で
let element_svg_line = document.getElementById('svg_line_id1');
とすることで、getElementByIdでline要素を取得し、プロパティにアクセスすることができています。
また、transformは移動・回転・伸縮・傾斜を制御するプロパティですが、このプロパティ以外を設定することで様々な動きが可能になります。