このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第49回

HTML5のInline SVGをJavaScriptで操作

2011年02月10日 13時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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】fig05.png 【図6】fig06.png
ボタンをクリックすると図形の色が変わる

サンプル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の属性値を変更して再描画したときに画面にゴミが残ることがあります。文字は特にゴミが残りやすいようです。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く