🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

SvgZoom.js is a lightweight jQuery plugin that allows you to pan and zoom in/out a SVG image element using mouse wheel events and JavaScript hooks.

image-zoom image-pan SVG

Documentation

svg zoom

A light jQuery plugin for zooming svg.It is just 3 kb before gzip. 基于jQuery的简洁的svg缩放插件,普通压缩后仅3kb。

quick start

1.add jquery and svg-zoom files

  <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>   <script src="/path/SvgZoom.min.js"></script>

2.select a svg element to init

  var svgZoom = new SvgZoom('#svgId')

configs

  • If you want to override the defaults, you can optionally specify the arguments:
  new SvgZoom('#svgId',{       mouseWheel: true,       zoomSpeed: 0.065,       maxZoom: Number.POSITIVE_INFINITY,       minZoom: 0.2,       initZoom: 1,       center: true,       viewClass: 'svgzoom-view',       //class selector depends on jq's version may be faild when IE,should replace with [class='classname']       zoomSelector: '',       dragCursorStyle: 'move'   }) 

methods

  • setZoom(zoom:Number)
  • setMouseWheel(enable:Boolean)
  • center

You May Also Like