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

Overview

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/[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

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

    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 ?

    opened by Korak-997 9
  • SVG content is not centered/correctly panned when scale is < 1

    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!

    opened by paopre 4
  • Listenning to event

    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>
    
    opened by Spir 3
  • chore(deps): bump minimist from 1.2.5 to 1.2.6

    chore(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump tmpl from 1.0.4 to 1.0.5

    chore(deps): bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump path-parse from 1.0.6 to 1.0.7

    chore(deps): bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump pug-code-gen from 2.0.2 to 2.0.3

    chore(deps): bump pug-code-gen from 2.0.2 to 2.0.3

    Bumps pug-code-gen from 2.0.2 to 2.0.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump yargs-parser from 13.1.1 to 13.1.2

    chore(deps): bump yargs-parser from 13.1.1 to 13.1.2

    Bumps yargs-parser from 13.1.1 to 13.1.2.

    Changelog

    Sourced from yargs-parser's changelog.

    15.0.0 (2019-10-07)

    Features

    • rework collect-unknown-options into unknown-options-as-args, providing more comprehensive functionality (ef771ca)

    BREAKING CHANGES

    • rework collect-unknown-options into unknown-options-as-args, providing more comprehensive functionality

    14.0.0 (2019-09-06)

    Bug Fixes

    • boolean arrays with default values (#185) (7d42572)
    • boolean now behaves the same as other array types (#184) (17ca3bd)
    • eatNargs() for 'opt.narg === 0' and boolean typed options (#188) (c5a1db0)
    • maybeCoerceNumber now takes precedence over coerce return value (#182) (2f26436)
    • take into account aliases when appending arrays from config object (#199) (f8a2d3f)

    Features

    • add configuration option to "collect-unknown-options" (#181) (7909cc4)
    • maybeCoerceNumber() now takes into account arrays (#187) (31c204b)

    BREAKING CHANGES

    • unless "parse-numbers" is set to "false", arrays of numeric strings are now parsed as numbers, rather than strings.
    • we have dropped the broken "defaulted" functionality; we would like to revisit adding this in the future.
    • maybeCoerceNumber now takes precedence over coerce return value (#182)
    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for yargs-parser since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump lodash from 4.17.15 to 4.17.19

    chore(deps): bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Performance issue on Chromium-based browsers

    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
    opened by luncheon 0
  • Can't manually scale with values < 1

    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!

    opened by paopre 2
Easy Pan and Zoom JS Library

EasyPZ Use this Javascript library to make your web visualization interactive via pan and zoom, for mobile and desktop! EasyPZ supports many interacti

Micha Schwab 129 Nov 21, 2022
This repository contains an Advanced Zoom Apps Sample. It should serve as a starting point for you to build and test your own Zoom App in development.

Advanced Zoom Apps Sample Advanced Sample covers most complex scenarios that you might be needed in apps. App has reference implementation for: Authen

Zoom 11 Dec 17, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
Create a deep copy of a set of matched elements with the dynamic state of all form elements copied to the cloned elements.

jq-deepest-copy FUNCTION: Create a deep copy of a set of matched elements while preserving the dynamic state of any matched form elements. Example Use

Michael Coughlin 5 Oct 28, 2022
Make drag-and-drop easier using DropPoint. Drag content without having to open side-by-side windows

Make drag-and-drop easier using DropPoint! DropPoint helps you drag content without having to open side-by-side windows Works on Windows, Linux and Ma

Sudev Suresh Sreedevi 391 Dec 29, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
DoMe is a ToDo App. you can add, delete and reorder elements of the todo list using drag and drop. You can also toggle between dark&light mode

DO ME Todo App Live Preview : DO ME Built With : - ReactJS - TailwindCSS Make sure you have: - Git - Nodejs version 14 or higher (we recommend using

Medjahdi Islem 5 Nov 18, 2022
A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mechanism to manipulate DOM elements

JavaScript Project to Manipulate DOM Elements DFlex A Drag-and-Drop library for all JavaScript frameworks implementing an enhanced transformation mech

DFlex 1.5k Jan 8, 2023
We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Zuri Training 17 Dec 2, 2022
Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.

pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this

Andre Plötze 44 Nov 4, 2022
A jQuery plugin that adds cross-browser mouse wheel support.

jQuery Mouse Wheel Plugin A jQuery plugin that adds cross-browser mouse wheel support with delta normalization. In order to use the plugin, simply bin

jQuery 3.9k Dec 26, 2022
Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.

scrooth Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed. Why? I needed that, and I was unable to find p

Rafał Spiżewski 20 Aug 29, 2022
Serialize arbitrary NodeJS closures and customize serialization behavior.

Closure Serializer This is a fork of the Pulumi Closure Serializer. @pulumi/pulumi. Motivation Functionless allows developers to write cloud applicati

null 4 Jul 19, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022
Vanilla javascript (ES6) function enabling drag scrolling on desktop

Drag-n-scroll also on desktop devices, by LCweb No dependencies vanilla javascript function to easily implement a nice drag-to-scroll effect using dse

Luca 2 Apr 5, 2022
A JavaScript library for adding ripple effects to HTML elements based on mouse events.

About project Ripplejs is an open source javascript library created for the purpose of adding ripple effects to html elements based on mouse events. L

Udezue Oluomachi Chimaobi 7 May 10, 2022