jQuery Plugin For Panning and Zooming SVG Images

A jQuery plugin to create panning and zooming functionality for SVG images. Supports panning and zooming SVG images with the mouse events or programmatically, in browsers that support SVG element.

An Advanced Version is now available!

See also:

• jQuery Plugin For Panning and Zooming Any Elements - panzoom

How to use it:

1. Include the jQuery SVG Pan Zoom plugin after loading jQuery library.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="compiled/jquery.svg.pan.zoom.js"></script>

2. Insert a SVG image into your document.

3. Initialize the plugin.

$("svg").svgPanZoom({
// OPTIONS
});

4. Default options.

events: {

  // enables mouse wheel zooming events
  mouseWheel: true, 

  // enables double-click to zoom-in events
  doubleClick: true, 

  // enables drag and drop to move the SVG events
  drag: true, 

  // cursor to use while dragging the SVG
  dragCursor: "move"
},

// time in milliseconds to use as default for animations. 
// Set 0 to remove the animation
animationTime: 300 

// how much to zoom-in or zoom-out
zoomFactor: 0.25 

// maximum zoom in, must be a number bigger than 1
maxZoom: 3,

// how much to move the viewBox when calling .panDirection() methods
panFactor: 100

// the initial viewBox, if null or undefined will try to use the viewBox set in the svg tag. 
// Also accepts string in the format "X Y Width Height"
initialViewBox: { 

  // the top-left corner X coordinate
  x: 0

  // the top-left corner Y coordinate
  y: 0

  // the width of the viewBox
  width: 1000

  // the height of the viewBox
  height: 1000 
},

// the limits in which the image can be moved. 
// If null or undefined will use the initialViewBox plus 15% in each direction
limits: { 
  x: -150
  y: -150
  x2: 1150
  y2: 1150
}

4. Available methods which allows you to pan & zoom a SVG image programmatically.

// panUp(amount, animationTime)
// amount: How much to move the viewBox
// animationTime: How long the animation should last
panUp()
panDown()
panLeft()
panRight()

// zoomIn(animationTime)
// animationTime: How long the animation should last
zoomIn()
zoomOut()

// reset
reset()

// Returns the viewbox (x, y, width, height)
getViewBox()

// Changes the viewBox to the specified coordinates. 
setViewBox(x, y, width, height, animationTime)

// Sets the center of the SVG.
setCenter(x, y, animationTime)

Change logs:

v1.0.3 (2015-10-12)

• Fixed undefined error in firefox for viewbox.baseVal

2015-06-02

• Added maxZoom option

2015-05-30

• bug fixed

2015-01-24

• Fixed touch events

v1.0.1 (2015-01-23)

• update.

---

This awesome jQuery plugin is developed by DanielHoffmann. For more Advanced Usages, please check the demo page or visit the official website.