Touch-enabled SVG Pan & Zoom Plugin - jQuery SVGPanZoom

This is an advanced version of the jQuery SVG Pan Zoom plugin that enables panning and zoom in/out functionalities on SVG images using mouse drag, mouse wheel, touch swipe and touch pinch events.

Installation:

# NPM
$ npm install @avcs/svgpanzoom --save

How to use it:

1. Wrap your SVG image into a container.

<div id="SVGContainer">
  <svg version="1.1" viewbox="-50,-250,1100,700" id="demoSVG">
    ...
  </svg>
</div>

2. Create controls to zoom in/out the SVG.

<div id="controls">
  <svg version="1.1">
      <g transform="translate(10,10)">
          <g transform="translate(0,47)">
              <g cursor="pointer" id="zoomin">
                  <circle r="15.5" cx="0" cy="0" fill="#FFFFFF" stroke="#000000" fill-opacity="0.7" stroke-width="1" stroke-opacity="0.1"
                      transform="translate(16,16)"></circle>
                  <g transform="translate(16,16)" opacity="1" style="pointer-events: none;">
                      <path cs="100,100" d="M-6.5,0.5 L7.5,0.5" fill="none" stroke-width="1" stroke-opacity="1" stroke="#494949"></path>
                      <path cs="100,100" d="M0.5,-6.5 L0.5,7.5" fill="none" stroke-width="1" stroke-opacity="1" stroke="#494949"></path>
                  </g>
              </g>
              <g cursor="pointer" id="zoomout" transform="translate(0,36)">
                  <circle r="15.5" cx="0" cy="0" fill="#FFFFFF" stroke="#000000" fill-opacity="0.7" stroke-width="1" stroke-opacity="0.1"
                      transform="translate(16,16)"></circle>
                  <path cs="100,100" d="M-6.5,0.5 L7.5,0.5" fill="none" stroke-width="1" stroke-opacity="1" stroke="#494949"
                      transform="translate(16,16)" opacity="1" style="pointer-events: none;"></path>
              </g>
          </g>
          <g cursor="pointer" id="resetSVG">
              <circle r="15.5" cx="0" cy="0" fill="#FFFFFF" stroke="#000000" fill-opacity="0.7" stroke-width="1" stroke-opacity="0.1"
                  transform="translate(16,16)"></circle>
              <path cs="100,100" d="M-6.5,0.5 L0.5,-6.5 L7.5,0.5 L6.5,0.5 L6.5,6.5 L2.5,6.5 L2.5,2.5 L-1.5,2.5 L-1.5,6.5 L-5.5,6.5 L-5.5,0.5 Z"
                  fill="#494949" stroke="#494949" fill-opacity="1" stroke-width="1" stroke-opacity="1" transform="translate(16,16)"
                  opacity="1" style="pointer-events: none;"></path>
          </g>
      </g>
  </svg>
</div>

3. Insert jQuery JavaScript library and the jQuery SVGPanZoom plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="SVGPanZoom.js"></script>
<!-- or from a CDN -->
<script src="https://unpkg.com/@avcs/svgpanzoom"></script>

4. Enable the plugin and done.

var instance = new SVGPanZoom($('#demoSVG')[0], {
    eventMagnet: '#SVGContainer'
});

5. All default plugin options.

var instance = new SVGPanZoom($('#demoSVG')[0], {

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

    // element(container) to which all the events are attached
    // if null events will be attached to SVG element itself
    // useful when your own touch and mouse events are interfering with the events of plugin
    eventMagnet: null,

    // zoom options
    zoom: {
      factor: 0.25,
      minZoom: 1,
      maxZoom: 3,
      events: {
          mouseWheel: true,
          doubleClick: true,
          pinch: true
      },
      callback: function callback(multiplier) {}
    },

    // pan options
    pan: {
      factor: 100,
      events: {
          drag: true,
          dragMouseButton: 1,
          dragCursor: "move"
      },
      callback: function callback(coordinates) {}
    }

    // 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
    }

});

6. Available methods to pan & zoom an 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)

Changelog:

v2.0.7 (2019-03-24)

• minor cleanup and NPM support

v2.0.5 (2018-08-23)

• Bugfix: Not removing events in destroy

v2.0.4 (2018-08-05)

• Bugfix window not available error handled when using in node. 

v2.0.3 (2018-08-04)

• Calculation updates for limits to allow more freedom while zooming out

---

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