Touch-enabled SVG Pan & Zoom Plugin - jQuery SVGPanZoom

Touch-enabled SVG Pan & Zoom Plugin - jQuery SVGPanZoom
File Size: 528 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.