HTML5で手軽に扱えるようになったSVG(Scalable Vector Graphics)。前回は、Inline SVG(インラインSVG)で基本的な図形を描く方法を解説しました。今回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御します。 JavaScriptでSVG要素にアクセスする 最初に、制御対象となるSVGデータを作成しましょう。JavaScriptで制御したいSVG要素にはid属性を記述し、ID名を付けておきます。通常のHTMLタグ(要素)にID名を指定する場合とまったく同じです。たとえば<rect>(四角形)を制御したい場合は以下のように記述します(ID名は任意)。 <svg> <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" /> </svg> ID名を指定してお
![HTML5のInline SVGをJavaScriptで操作 (1/5)](https://cdn-ak-scissors.b.st-hatena.com/image/square/56bb52ee4d8360428cbea8c08ac1f27e6a2ad7e5/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F08%2F25%2F243905%2Fl%2Ff4696adf40d20f6a.jpg)