図形の拡大・縮小
次に、図形を拡大縮小させてみましょう。図形の拡大縮小にはscale()を使います。scale()は引数が1つの場合は縦横とも指定された倍率で表示されます。たとえば以下のようにすると縦横2倍のサイズで表示されます。
poly.setAttribute("transform", "scale(2)");
引数が2つの場合は第1引数が横方向の倍率を、第2引数が縦方向の倍率を示します。以下のように指定すると横が半分のサイズ、縦が2倍のサイズで表示されます。
poly.setAttribute("transform", "scale(0.5, 2)");
実際のプログラムはサンプル8です。
ボタンをクリックすると図形のスケールが変化する
■サンプル8[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 width="100%" height="300"> <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", "scale(0.5, 2)"); }, true); </script> </body> </html>
ここまでのサンプルは四角形や多角形といった単純な図形だけを扱ってきました。しかし、実際にSVGを利用するときには単一の図形で表現できることはほとんどなく、複数の図形を組み合わせて表現することが多いでしょう。複数の図形を組み合わせる場合、関連する図形をまとめて変形させる必要があります。
SVGでは複数の図形をグループ化する<g>タグが用意されています。まとめて変形させたい図形を<g>タグで囲んでID名を指定します。JavaScriptで変形させる場合は<g>タグに対して変形用の命令を実行します。
たとえば以下のように<g>タグを用意します。
<g id="myPoly">
この<g>タグで囲まれた図形全体を2倍サイズに拡大する場合、以下のように記述します。
var poly = document.getElementById("myPoly"); poly.setAttribute("transform", "scale(2)");
実際のプログラムはサンプル9です。ボタンをクリックすると図形全体が2倍サイズで表示されます。
ボタンをクリックすると図形全体のサイズが2倍になる
■サンプル9[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 width="100%" height="300"> <g id="myPoly"> <polygon fill="#0000FF" points="101.14,111.445 0,111.445 0,98.445 101.14,0 "/> <polygon fill="#FFF000" stroke="#E50012" stroke-miterlimit="10" 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 "/> <text transform="matrix(1 0 0 1 0.7581 61.9116)" font-family="'KozGoPro-Regular-83pv-RKSJ-H'" font-size="31.1349">ASCII.jp</text> </g> </svg> <script type="text/javascript"> document.getElementById("change").addEventListener("click", function(){ var poly = document.getElementById("myPoly"); // グループ poly.setAttribute("transform", "scale(2)"); }, true); </script> </body> </html>
まとめて変形させたい場合は、setAttribute()で指定する変形用の命令を半角空白で区切って列記します。たとえば以下のようにすると2倍に拡大した後、右方向に25度傾斜させ、右に70ピクセル移動させます。記述した順番に変形処理が実行されるので、順番が違うと結果も異なります。
poly.setAttribute("transform", "scale(2) skewX(-25) translate(70)");
実際のプログラムはサンプル10です。
ボタンをクリックすると図形全体が変形する
■サンプル10[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 width="100%" height="300"> <g id="myPoly"> <polygon fill="#0000FF" points="101.14,111.445 0,111.445 0,98.445 101.14,0 "/> <polygon fill="#FFF000" stroke="#E50012" stroke-miterlimit="10" 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 "/> <text transform="matrix(1 0 0 1 0.7581 61.9116)" font-family="'KozGoPro-Regular-83pv-RKSJ-H'" font-size="31.1349">ASCII.jp</text> </g> </svg> <script type="text/javascript"> document.getElementById("change").addEventListener("click", function(){ var poly = document.getElementById("myPoly"); // グループ poly.setAttribute("transform", "scale(2) skewX(-25) translate(70)"); }, true); </script> </body> </html>
