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:
Usage
This library depends on the SVG.js library.
<!-- Or from cdn<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.pan-zoom.js/2.1.0/svg.pan-zoom.min.js"></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.