Svg.pan-zoom.js NPM

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.