luncheon/svg-pan-zoom-container

A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

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/[email protected]"></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>

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/[email protected]"></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>

Run on CodePen

Options for data-zoom-on-wheel

Name	Type	Default	Description
zoom-amount	number	0.002	Zoom amount per deltaY of wheel events.
min-scale	number	1	Minimum scale.
max-scale	number	10	Maximum scale.

Options for data-pan-on-drag

Name	Type	Default	Description
button	"left" | "right"	"left"	Mouse button to drag to pan.
modifier	"" | "Alt" | "Control" | "Meta" | "Shift"	""	Drag to pan only when this modifier key is pressed.

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 } from 'svg-pan-zoom-container';

When installing via CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  const { pan, zoom, getScale, setScale, resetScale } = svgPanZoomContainer;
</script>

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

svg-pan-zoom-container's Issues

Can't manually scale with values < 1

Hello,

this shows the uncorrect result:

https://jsfiddle.net/xh295kws/1/

Is there a way to fix this?

In any case, at the current state, min possible scale should be set to 1 (update the doc), in order to avoid undefined behaviors.

Thanks!

SVG content is not centered/correctly panned when scale is < 1

Hello.

As you can see in this jsfiddle:

https://jsfiddle.net/pLhb419u/

... when the scale amount is < 1, the svg is resized in the left top corner. Is there a way to fix this (or at least a work around) so to see the picture resized at the mouse position or at least centered?

Thanks for your great work!

Support for different keys for data-pan-on-drag

FIrst of all Thanks so much for that lovely tool.

I was wondering if somehow Support for different keys for data-pan-on-drag can be added ?!

In my project i kind of need usage of left click , so it will be easier for me if for example the function works when i push for example CTRL + L-CLICK . Or maybe another combinations !!

Can something like that be added ?

Performance issue on Chromium-based browsers

Zooming is very slow on Chrome. Firefox and Safari are fine.
I know that the setting scrollLeft takes too much time. But I don't know the solution.

---

I don't know if this is related to the following issue.

• 342778 - SVG images affects scroll performance drastically - chromium
  https://bugs.chromium.org/p/chromium/issues/detail?id=342778

To address this issue, give the scrolling container an opaque background color and set "contain: paint" on it.

The above solution does not help.

---

See also

• What forces layout/reflow. The comprehensive list.
  https://gist.github.com/paulirish/5d52fb081b3570c81e3a

Listenning to event "keydown"

Why is it not possible to listen to event "onkeydown" when using this library?

// this is never called

document.getElementById('svg-wrapper').addEventListener("keydown", function(event) {
  console.debug(event.keyCode);
});

If I remove the data attribute it works again:

<div id="svg-wrapper" tabindex="1" data-pan-on-drag data-zoom-on-wheel="min-scale: 0.3; max-scale: 1000;">
 <svg>...</svg>
</div>