図形を変形させる
今度はSVG図形を変形させてみましょう。transform属性に以下のような変形用の命令とパラメーターを指定します。
命令 | パラメーター | 処理内容 |
---|---|---|
matrix | a b c d e f | 行列を利用して変形 |
rotate | 角度 回転の中心XY座標 | 回転。回転の中心座標は省略できる |
scale | 横の倍率 縦の倍率 | 拡大縮小(スケール) |
skewX | 角度 | 横方向の傾斜 |
skewY | 角度 | 縦方向の傾斜 |
translate | X座標 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>