- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
SVG zoom-in and zoom-out in React JS
In this article, we will see how to zoom SVG images in React JS. It is really useful in some cases. We will use the react-svg-pan-zoom package to create a feature that will zoom-in or rotate our SVG image.
First create a React project −
npx create-react-app tutorialpurpose
Go to the project directory −
cd tutorialpurpose
Example
Install the react-svg-pan-zoom package −
npm i --save react-svg-pan-zoom
This package will allow us to implement an area over which we can zoom-in and zoom-out and even rotate an image.
Add the following lines of code in App.js −
import React, { useRef, useEffect } from "react"; import { UncontrolledReactSVGPanZoom } from "react-svg-panzoom"; export default function App() { const Viewer = useRef(null); useEffect(() => { Viewer.current.fitToViewer(); }, []); const _zoomOnViewerCenter = () => Viewer.current.zoomOnViewerCenter(1.1); const _fitSelection = () => Viewer.current.fitSelection(40,40, 200, 200); const _fitToViewer = () => Viewer.current.fitToViewer(); return ( <div> <h1>UncontrolledReactSVGPanZoom</h1> <hr /> <button className="btn" onClick={() =>_zoomOnViewerCenter()}>Zoom on center </button> <button className="btn" onClick={() =>_fitSelection()}> Zoom area 200x200 </button> <button className="btn" onClick={() => _fitToViewer()}> Fit </button> <hr /> <UncontrolledReactSVGPanZoom ref={Viewer} width={500} height={500}> <svg width={617} height={316}> <g fillOpacity=".5" strokeWidth="4"> <rectx="400" y="40" width="100" height="200" fill="#4286f4" stroke="#f4f142" /> </g> </svg> </UncontrolledReactSVGPanZoom> </div> ); }
Explanation
This is the default code from the documentation.
We first created a reference, where we referenced its default view, which will fit to the screen.
Then we created 3 functions to change the zoom settings.
In <UncontrolledReactSVGPanZoom> we give reference and inside it, we add an SVG image to operate.
Output
On execution, it will produce the following output −