A React component that adds pan and zoom features to SVG Sample in 2020

A React component that adds pan and zoom features to SVG Sample in 2020


tutorials -

react-svg-pan-zoom

react-svg-pan-zoom is a React component that adds pan and zoom features to the SVG images. It helps to display big SVG images in a small space.

Features

This component can work in four different modes depending on the selected tool:

With the tool pan the user can move the image and drag it around within the viewer, but can't interact with SVG child elements.
With the tool zoom the user can scale the image either with a point click or selecting a region to zoom the specified area, but can't interact with SVG child elements.
With the tool none the user can interact with SVG child elements and trigger events.
With the tool auto the user can interact with SVG child elements, perform pan (dragging the image), zoom in (double click), zoom out (double click + shift).

Live Demo

http://chrvadala.github.io/react-svg-pan-zoom/

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff