Socket
Socket
Sign inDemoInstall

svg-pan-zoom-container

Package Overview
Dependencies
0
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    svg-pan-zoom-container

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


Version published
Weekly downloads
406
decreased by-1.46%
Maintainers
1
Install size
42.9 kB
Created
Weekly downloads
 

Readme

Source

svg-pan-zoom-container

BundlePhobia License: WTFPL npm jsDelivr

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>

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>

Run on CodePen

Options for data-zoom-on-wheel

NameTypeDefaultDescription
zoom-amountnumber0.002Zoom amount per deltaY of wheel events.
min-scalenumber1Minimum scale.
max-scalenumber10Maximum scale.

Options for data-pan-on-drag

NameTypeDefaultDescription
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/svg-pan-zoom-container@0.6.1"></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

Keywords

FAQs

Last updated on 26 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc