svgの特色としては「ベクタ画像である」「グラフィックの部品化が容易」「domを操作することで様々な処理を行うことが出来る」等,様々なものが挙げられますが,いざこれらを活かすとなるとどう使えば良いかイメージしにくいこともあろうかと思います. そこで今回は実際にこれらの仕組みを使って簡単な地図を作ってみようと思います.でも単なる地図であれば面白くありませんから,拡大・縮小・移動・回転を可能とする言わばtiny google mapのような機能を実装してみましょう. とにかく見てみよう それでは早速見てみましょう.直接開く 地図画像 スクリプト 実装した機能は次のとおりです. マウスドラッグで位置を変更できます マウスホイールで拡大縮小できます shiftもしくはaltキーを押したままマウスをホイールすることで回転することができます ダブルクリックで位置を元に戻します 地図を変形しても市名を表