JavaScript Library For Zooming & Panning SVG Elements - svg.pan-zoom.js

svg.pan-zoom.js is a JavaScript library which allows you to zoom in/out and pan SVG elements with mouse & touch interaction, depended on jQuery library and SVG.js.

How to use it:

1. Load the necessary jQuery library and the SVG.js in your document.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="path/to/svg.js"></script>

2. Make sure to load the svg.pan-zoom.js JS library after jQuery libray.

<script src="path/to/svg.pan-zoom.js"></script>

3. Use the SVG() function to create SVG elements and make them zoomable & pannable.

var svg = new SVG($(".graph").get(0)).size("100%", 900);
var links = svg.group();
var markers = svg.group();
var nodes = svg.group();

// Add draggable circles
var g1 = nodes.group().translate(300, 200).draggable();
g1.circle(80).fill("#C2185B");

var g2 = nodes.group().translate(100, 200);
g2.circle(50).fill("#E91E63");

var g3 = nodes.group().translate(200, 400);
g3.circle(100).fill("#FF5252");

// Make the group pannable and zoomable
nodes.panZoom();

Change log:

v2.8.0 (2016-02-04)

• update.

2015-07-15

• Fixed: 'parent' is a function
• Demo update

v2.1.0 (2015-05-01)

• update.

---

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