Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

svg-pan-zoom

Package Overview
Dependencies
Maintainers
3
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

svg-pan-zoom

JavaScript library for panning and zooming an SVG image from the mouse, touches and programmatically.

latest
Source
npmnpm
Version
3.6.2
Version published
Weekly downloads
467K
0.65%
Maintainers
3
Weekly downloads
 
Created

What is svg-pan-zoom?

The svg-pan-zoom npm package allows you to add pan and zoom functionalities to SVG elements. It is useful for creating interactive graphics, maps, and diagrams where users need to zoom in and out or pan around the content.

What are svg-pan-zoom's main functionalities?

Enable Pan and Zoom

This feature initializes the pan and zoom functionality on a specified SVG element. The user can then pan and zoom using mouse or touch gestures.

const svgPanZoom = require('svg-pan-zoom');
const panZoomInstance = svgPanZoom('#your-svg-element');

Set Zoom Scale Limits

This feature allows you to set minimum and maximum zoom levels for the SVG element, preventing users from zooming out too far or zooming in too close.

const panZoomInstance = svgPanZoom('#your-svg-element', {
  minZoom: 0.5,
  maxZoom: 10
});

Programmatically Control Zoom and Pan

This feature allows you to control the zoom and pan programmatically, which can be useful for creating custom controls or responding to other events in your application.

const panZoomInstance = svgPanZoom('#your-svg-element');
panZoomInstance.zoom(2); // Zoom to 200%
panZoomInstance.pan({ x: 100, y: 50 }); // Pan to coordinates (100, 50)

Reset View

This feature resets the SVG view to its original state, undoing any zoom or pan actions that the user has performed.

const panZoomInstance = svgPanZoom('#your-svg-element');
panZoomInstance.reset();

Other packages similar to svg-pan-zoom

Keywords

svg

FAQs

Package last updated on 20 Oct 2024

Did you know?

Socket

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