HTML5のSVG + jQueryで画像の拡大縮小
HTML5で本格的にサポートされている画像形式のSVG。
特徴のひとつに、jpg, gif, pngのようなビットマップ形式の画像と異なり、
どんなに拡大しても、画像が粗くならず、きれいに表示することができるという特徴があります。
今回は、その特徴を利用して、SVGの画像を拡大縮小するHTMLを組んでみました。
コチラがそのDEMO
地図AIデータ→http://kage-design.com/wp/?p=1061
SVGをHTMLに読み込む方法はいくつかありますが、
javascriptで読み込む方法を使いました。
参考→http://gihyo.jp/dev/feature/01/svg/0004?page=1
HTML
|
1 | <div id="svg_image"></div> |
SVG読み込み部分のJavaScript
|
1 2 3 4 5 6 7 8 9 10 | var xhr = new XMLHttpRequest(); xhr.open('GET', 'japan.svg', true); xhr.onload = function(){ var stage = document.getElementById('svg_image'); var svgroot = xhr.responseXML.documentElement; if (svgroot){ var svg = stage.appendChild(document.adoptNode(svgroot)); } }; xhr.send(); |
拡大縮小は、読み込んだSVGデータ内の<svg>の大きさ(widthとheight)を、
直接CSSで変更することで行いました。
また、拡大縮小の動きは、Googleマップのイメージで、
マウスのホイールを動かすことで、拡大縮小がされるようにしました。
ホイールイベントの取得には、jquery.mousewheel.jsを使いました(リンク先は、下サイトのjsでうまく動作しなかったため、正常に動く状態のjsが残されたサイトにリンクしています)。
拡大縮小のJavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $(function(){ var svgWidth = 600; var svgMgn = 0; var mlpls = 20; $("#svg_image").mousewheel(function(event,delta){ switch(delta){ case 1: svgWidth = svgWidth + mlpls; svgMgn = svgMgn - (mlpls / 2); mlpls = mlpls + 20; $("#svg_image svg").css({ "width": svgWidth + "px", "height": svgWidth + "px", "margin-left": svgMgn + "px", "margin-top": svgMgn + "px" }); break; case -1: svgWidth = svgWidth - mlpls; svgMgn = svgMgn + (mlpls / 2); mlpls = mlpls - 20; $("#svg_image svg").css({ "width": svgWidth + "px", "height": svgWidth + "px", "margin-left": svgMgn + "px", "margin-top": svgMgn + "px" }); break; } }); }); |
単純な拡大縮小の場合、シンプルなJavaScriptで済むので、
軽い負担で様々な応用ができそうです。
Author Profile
SHARE
