SVG zoom-in and zoom-out in React JS

React JSJavascript LibraryFront End Technology

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 −

raja
Published on 29-Sep-2021 08:57:27
Advertisements