This plugins is meant to pan and zoom in/out an SVG object inside a div container. This is particulary usefull for SVG Maps. This plugin is based on jQuery to ensure multi-browsers support.
It has been qualifyed on jQuery 3.1, Jquery UI 1.2 (draggable) and jQuery mousewheel 3.1
Copy the jquery.zoom-svg.min.js and zoom-svg.min.css dist files in your lib folder.
Simply load the scripts and css files.
<script type="text/javascript" src="../test/libs/jquery.min.js"></script>
<script type="text/javascript" src="../test/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="../test/libs/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../dist/jquery.zoom-svg.min.js"></script>
<link rel="stylesheet" type="text/css" href="../dist/zoom-svg.min.css">
In your HTML File, create a div container with the class zoom-svg-container. Add your svg inside. Make sure the SVG contains a viewBox otherwise it won't work. Add 3 divs for the zoom-in, zoom-out and zoom-rst buttons as described below.
<div class="zoom-svg-container">
<svg id="svg1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"
viewBox="0 0 500 400" version="1.1" preserveAspectRatio="xMinYMid slice" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs id="defs3">
... Your SVG ...
</svg>
<div class="zoom-svg-zoom zoom-svg-zoom-in"> + </div>
<div class="zoom-svg-zoom zoom-svg-zoom-rst"> = </div>
<div class="zoom-svg-zoom zoom-svg-zoom-out"> - </div>
</div>
Bind zoomSvg to your svg using the jQuery selector.
$("svg").zoomSvg();
step adjust the granularity of the zoom step.
zoomSvg.options = {
step : 5,
}
This was tested on Chrome 56 and IE 11 You can run the test/index.html for playing.
ENJOY ! Handcrafted with heart.