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 and y).

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 as scale 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 as scale internally.
• Number oX: An optional origin point x coordinate.
• Number oY: An optional origin point y coordinate.
• Event ev: An optional event object. If provided, the zoom 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.