`

Run on CodePen

$3

| 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. |

$3

| 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.

`javascript
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.

$3

#### When installing via npm

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

#### When installing via CDN

`html


`

$3

Pans.

$3

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

$3

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):

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

$3

Resets scale and scroll position.

$3

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

License

WTFPL