svg.pan-zoom.js
A JavaScript library for panning and zooming SVG things.
Available on CDN!
CDNJS kindly hosts this library. You can use the cdn version:
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.pan-zoom.js/2.7.0/svg.pan-zoom.min.js"></script>
Usage
This library depends on the SVG.js library.
<script src="path/to/svg.js"></script> <script src="path/to/svg.pan-zoom.js"></script> <!-- Or from cdn <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.pan-zoom.js/2.1.0/svg.pan-zoom.min.js"></script> --> <script> 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).draggable(); g2.circle(50).fill("#E91E63"); var g3 = nodes.group().translate(200, 400).draggable(); g3.circle(100).fill("#FF5252"); // Make the group pannable and zoomable nodes.panZoom(); </script>
Check out the online demo.
Documentation
panZoom(opt_options)
The pan-zoom contructor.
Params
- Object
opt_options
: An optional object containing the following fields: zoom
(Array): An array of two float values: the minimum and maximum zoom values (default:undefined
).zoomSpeed
(Number): The zoom speed (default:-1
). By changing the sign the zoom is reversed.
Return
- PanZoom The PanZoom object containing the following fields:
elm
(SVG): The selected element.pan
(Object): An object containing pan values.transform
(Object): An object containing the transform data (scaleX
,scaleY
,x
andy
).
setPosition(x, y, z)
Sets the graph position programatically.
Params
- Number
x
: The relative position to the svg document (on x axis). - Number
y
: The relative position to the svg document (on y axis). - Number
z
: The zoom value which will be handled asscale
internally.
Return
- PanZoom The
PanZoom
instance.
zoom(z, oX, oY, ev)
Zooms in/out the graph programatically.
Params
- Number
z
: The zoom value which will be handled asscale
internally. - Number
oX
: An optional origin pointx
coordinate. - Number
oY
: An optional origin pointy
coordinate. - Event
ev
: An optional event object. If provided, thezoom
event will be triggered.
Return
- PanZoom The
PanZoom
instance.
How to contribute
Have an idea? Found a bug? See how to contribute.
License
See the LICENSE file.