SVGデータの属性値を変更する
JavaScriptでSVGデータを制御するには、制御したい要素を特定した後、setAttribute()メソッドを使って特定の属性に値を設定します。属性値が設定されると自動的にSVGデータは再描画されます*1。
実際の処理を見てみましょう。まず、制御したいSVG要素にID名を指定します。ここではID名を「myPoly」とします。
<polygon id="myPoly" ～ />
次に、document.getElementById()を使ってID名から要素を特定します。
var poly = document.getElementById("myPoly");
これで変数polyに<polygon>への参照が入りました。あとはsetAttribute()メソッドを使って属性値を変更します。たとえば塗りの色を変更したい場合はfill属性に対してカラーコード（またはカラー名）を指定します。
poly.setAttribute("fill", "#00ff00");
SVG要素の属性値はsetAttribute()メソッドで変更する必要があります。通常のHTMLタグの属性値と同じように書いても変更できません。
poly.fill = "#00ff00";
サンプル5はボタンをクリックすると図形の線と塗りの色が変化します。
ボタンをクリックすると図形の色が変わる
■サンプル5[HTML]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JavaScriptでSVGを制御(色変更)</title> </head> <body> <h1>JavaScriptでSVGを制御(色変更)</h1> <form> <input type="button" id="change" value="変更"> </form> <svg> <polygon id="myPoly" fill="#FFF000" stroke="#FF0000" points="72.278,58.394 78.338,91.04 48.74,75.993 19.565,91.844 24.729,59.045 0.639,36.196 33.428,30.972 47.715,1 62.814,30.57 95.734,34.895 "/> </svg> <script type="text/javascript"> document.getElementById("change").addEventListener("click", function(){ var poly = document.getElementById("myPoly"); // 多角形（ポリゴン） poly.setAttribute("fill", "#00ff00"); // 緑色で塗りつぶす poly.setAttribute("stroke", "blue"); // 青色の線にする }, true); </script> </body> </html>
*1 Google Chrome 7ではSVGの属性値を変更して再描画したときに画面にゴミが残ることがあります。文字は特にゴミが残りやすいようです。
