JavaScriptを使ってSVG図形を描く
最後に、JavaScriptを使ってSVGデータを表示してみましょう。要素ノードはcreateElement()やappendChild()を使って追加できますが、Inline SVGは表示されません（ノードはあるが表示されない）。
そこでサンプル10のようにinnerHTMLを使ってsvgタグを挿入すると、ひとまずページ内にSVGデータを表示できます。よいとも悪いとも言えない方法ですが、表示したいだけならinnerHTMLでもよさそうです。
ボタンをクリックするとページ内にInlineSVGで直線が描画される
■サンプル10[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SVG：直線を描く</title> </head> <body> <h1>SVG：直線を描く</h1> <form> <input type="button" value="直線を描く" onclick="drawLine()" /> </form> <script> function drawLine(){ var svgArea = document.getElementById("mySVG"); var svgText = '<svg width="320" height="240"><line x1="20" y1="5" x2="300" y2="180" stroke="#ff0000" stroke-width="10" /></svg>'; svgArea.innerHTML = svgText; } </script> <div id="mySVG"></div> </body> </html>
次回はHTML文書内にあるInline SVGをJavaScriptで制御します。
※本連載では紹介しませんが、SVGにはほかにもグループ化する<g>タグや、グラデーション描画、変形機能などさまざまな機能があります。詳しくは以下のW3CのサイトやSVG関連のサイトを参照してください。
http://www.w3.org/svg/
