A React component that adds pan and zoom features to SVG
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/