@dbrnz/svg-pan-zoom-container v0.7.8

svg-pan-zoom-container

A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.
No need to write scripts. Just markup.

Demo

Usage

1. Load this module.
2. Diddle the parent element of the inline SVG element:
   • Add data-zoom-on-wheel attribute to add zoom-on-wheel behavior.
   • Add data-pan-on-drag attribute to add pan-on-drag behavior.
   • Make sure that the container's height is not "auto". The container's height must not be calculated from its content.

That's it!

<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom-container@0.6.1"></script>

<div
  data-zoom-on-wheel
  data-pan-on-drag
  style="height: 80vh;"
>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
  </svg>
</div>
<script>
  svgPanZoomInitialize();
</script>

Run on CodePen

Installation

via npm (with a module bundler)

$ npm i svg-pan-zoom-container

import 'svg-pan-zoom-container'

via CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom-container@0.6.1"></script>

Options

Some options can be specified as data-zoom-on-wheel and data-pan-on-drag attribute value.
Option name and value should be separated by colon (:).
Multiple options should be separated by semicolon (;).

Example

<div
  data-zoom-on-wheel="zoom-amount: 0.01; min-scale: 0.3; max-scale: 20;"
  data-pan-on-drag="button: right;"
  style="height: 80vh;"
>
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" />
  </svg>
</div>
<script>
  svgPanZoomInitialize();
</script>

Run on CodePen

Options for data-zoom-on-wheel

Options for data-pan-on-drag

Observation

Observe the transform attribute of the SVG element using MutationObserver.

const container = document.getElementById('my-svg-container')

const observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    console.log('scale:', getScale(container));
  });
});

observer.observe(container.firstElementChild, {
  attributes: true,
  attributeFilter: ['transform'],
});

API

This module provides some functions for scripting to control pan and zoom behavior.

API usage

When installing via npm

import { pan, zoom, getScale, setScale, resetScale, svgPanZoomInitialize } from 'svg-pan-zoom-container';

When installing via CDN

<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom-container@0.6.1"></script>
<script>
  const { pan, zoom, getScale, setScale, resetScale, svgPanZoomInitialize } = svgPanZoomContainer;
</script>

svgPanZoomInitialize()

Initialize pan on drag and zoom on wheel. This function must be called to enable SVG pan and zoom.

pan(container, deltaX, deltaY)

Pans.

getScale(container, options)

Returns current scale.
The return value is a 1-based fraction, not a percentage.

setScale(container, value, options)

Sets scale.
The value is considered as 1-based fraction, not as percentage.

The options can be specified as part of the following object (following values are the default):

const options = {
  origin: {
    clientX: 0,
    clientY: 0,
  },
  minScale: 1,
  maxScale: 10,
};

resetScale(container)

Resets scale and scroll position.

zoom(container, ratio, options)

Equivalents to setScale(container, getScale(container) * ratio, options).

License

WTFPL