Blog

HTML5のSVG + jQueryで画像の拡大縮小

2012.10.31Cat:html5 jQuery SVG デザイナー
日本地図

HTML5で本格的にサポートされている画像形式のSVG。

特徴のひとつに、jpg, gif, pngのようなビットマップ形式の画像と異なり、

どんなに拡大しても、画像が粗くならず、きれいに表示することができるという特徴があります。

今回は、その特徴を利用して、SVGの画像を拡大縮小するHTMLを組んでみました。

 

コチラがそのDEMO

DEMO

 

地図AIデータ→http://kage-design.com/wp/?p=1061

 

SVGをHTMLに読み込む方法はいくつかありますが、

javascriptで読み込む方法を使いました。

参考→http://gihyo.jp/dev/feature/01/svg/0004?page=1

 

HTML

SVG読み込み部分のJavaScript

 

拡大縮小は、読み込んだSVGデータ内の<svg>の大きさ(widthとheight)を、

直接CSSで変更することで行いました。

また、拡大縮小の動きは、Googleマップのイメージで、

マウスのホイールを動かすことで、拡大縮小がされるようにしました。

ホイールイベントの取得には、jquery.mousewheel.jsを使いました(リンク先は、下サイトのjsでうまく動作しなかったため、正常に動く状態のjsが残されたサイトにリンクしています)。

 

拡大縮小のJavaScript

 

単純な拡大縮小の場合、シンプルなJavaScriptで済むので、

軽い負担で様々な応用ができそうです。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ