JavaScript Library For Zooming & Panning SVG Elements - svg.pan-zoom.js
File Size: | 269 KB |
---|---|
Views Total: | 5242 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.