SVGについて – ドキュメント内にSVGを表示する(createElementNS)
SVGについて、描画の方法を試してみます。
前回の投稿ではHTML5ドキュメント内にSVGタグを直接記述してSVGを描画しましたが、
ここではjavascriptのcreateElementNSメソッドを使って描画してみます。
HTMLドキュメント内のdivタグにIDを付与し、javascriptでSVGを生成＋描画する方法
HTMLドキュメント内のdivタグにIDを付与し、javascriptでSVGを生成＋描画する方法を試してみます。
HTML全体のコードは次のように書きました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="svgtest"></div>
<script type="text/javascript">
let test1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
test1.setAttribute("width", "600");
test1.setAttribute("height", "400");
test1.setAttribute("viewbox", "0 0 600 400");
test1.setAttribute("style", "background-color:#cccccc;");
let line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
line.setAttribute('x1', '20');
line.setAttribute('y1', '50');
line.setAttribute('x2', '500');
line.setAttribute('y2', '300');
line.setAttribute('stroke', '#000000');
test1.appendChild(line);
let svgtest_dom = document.getElementById("svgtest");
svgtest_dom.appendChild(test1);
</script>
</body>
</html>
画面にアクセスすると、グレーのSVG領域に、黒で直線(line)が描画されます。
HTMLドキュメント内にはsvgタグを書いていないので、
javascript側で
document.createElementNS('http://www.w3.org/2000/svg', 'svg');
を記述し、
svgオブジェクトをcreateElementNSで生成しています。
HTMLドキュメント内のsvgタグに、javascriptでSVGを描画する方法
また、
<div id="svgtest"></div>
のdivタグをHTMLに記述せず、ここをsvgタグにすることもできます。
次のHTMLを用意しました。
<!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>
<script type="text/javascript">
let line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
line.setAttribute('x1', '30');
line.setAttribute('y1', '50');
line.setAttribute('x2', '400');
line.setAttribute('y2', '300');
line.setAttribute('stroke', '#000000');
let svgtest_dom = document.getElementById("svg_tag");
svgtest_dom.appendChild(line);
</script>
</body>
</html>
画面にアクセスすると、直線だけが描画されます。
一つ前のサンプルとの違いは、javascript内でsvgタグを生成していない為、
生成時に背景色を指定していた処理がない為、直線のみが描画されています。
HTMLドキュメント内のsvgタグに、javascriptでSVGを描画する方法(SVGの要素を変更)
先程のサンプルは直線のみを描画でしたが、直線の要素を円に変更して試してみます。
下記のHTMLサンプルを用意しました。
<!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>
<script type="text/javascript">
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '40');
circle.setAttribute('stroke', '#1');
circle.setAttribute('stroke-width', '300');
circle.setAttribute('fill', '#cccccc');
let svgtest_dom = document.getElementById("svg_tag");
svgtest_dom.appendChild(circle);
</script>
</body>
</html>
画面にアクセスすると、円(circle)の描画がされていることが確認できます。