React JS 中的 SVG 放大和缩小

在本文中，我们将了解如何在 React JS 中缩放 SVG 图像。在某些情况下它真的很有用。我们将使用react-svg-pan-zoom包创建一个可以放大或旋转 SVG 图像的功能。

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

转到项目目录 -

cd tutorialpurpose

示例

安装react-svg-pan-zoom包 -

npm i --save react-svg-pan-zoom

这个包将允许我们实现一个可以放大和缩小甚至旋转图像的区域。

在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>
   );
}

解释

这是文档中的默认代码。

• 我们首先创建了一个引用，我们在其中引用了它的默认视图，它将适合屏幕。

• 然后我们创建了 3 个函数来更改缩放设置。

• 在 <UncontrolledReactSVGPanZoom> 中我们给出了参考，在其中我们添加了一个 SVG 图像进行操作。

输出结果

在执行时，它将产生以下输出 -

<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/57039/883839-1632898740.mp4">您的浏览器不支持 HTML5 视频。