このページの本文へ

HTML5のInline SVGをJavaScriptで操作 (3/5)

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

文●古籏一浩

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

図形を変形させる

 今度はSVG図形を変形させてみましょう。transform属性に以下のような変形用の命令とパラメーターを指定します。

命令パラメーター処理内容
matrixa b c d e f 行列を利用して変形
rotate角度 回転の中心XY座標回転。回転の中心座標は省略できる
scale横の倍率 縦の倍率拡大縮小(スケール)
skewX角度横方向の傾斜
skewY角度縦方向の傾斜
translateX座標 Y座標 移動

 たとえば以下のような「myPoly」のID名を持つSVG要素があるとしましょう。

<polygon id="myPoly" ~ />

 この要素を右方向に30ピクセル、下方向に20ピクセル移動させる場合、以下のように記述します。

var poly = document.getElementById("myPoly");
poly.setAttribute("transform", "translate(30,20)");

 translate()はパラメータが1つの場合、横方向にだけ移動します。つまり以下のように指定すると右方向に30ピクセル移動します。

poly.setAttribute("transform", "translate(30)");

 実際のプログラムはサンプル6です。

ボタンをクリックすると図形が移動する

 なお、SVGの変形はアフィン変換で処理されます。アフィン変換については以下のページを参考にするとよいでしょう。

●W3C SVG Coordinate Systems, Transformations and Units
http://www.w3.org/TR/SVG/coords.html
●アフィン変換
http://www.adobe.com/jp/devnet/flash/articles/matrix_class.html

サンプル6[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("transform", "translate(30,20)");
}, true);
</script>
</body> 
</html>

 図形を回転させる場合は、rotate()を使います。角度が正数なら時計回り、負数なら反時計回りになります。以下の例では図形が反時計回りに45度回転します。

poly.setAttribute("transform", "rotate(-45)");

 rotate()には回転の中心座標も指定できます。以下のようにすると座標(20, 10)を中心にして図形が回転します。

poly.setAttribute("transform", "rotate(-45, 20, 10)");

 実際のプログラムはサンプル7です。ボタンをクリックすると図形が回転します。

ボタンをクリックすると図形が回転する

サンプル7[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("transform", "rotate(-20)");
}, true);
</script>
</body> 
</html>

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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