Skip to content
🐭 A JavaScript library for panning and zooming SVG things.
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.blah 📝 Sep 16, 2015
demo Updated the demo Jul 15, 2015
src 📝 Feb 4, 2016
.gitignore Added gitignore Aug 13, 2015
CONTRIBUTING.md Added CONTRIBUTING Aug 13, 2015
LICENSE
README.md
package.json

README.md

svg.pan-zoom.js

A JavaScript library for panning and zooming SVG things.

svg.pan-zoom.js

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.

You can’t perform that action at this time.