数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法律学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 图像来进行操作。
输出
执行后，它将生成以下输出 −
更新于: 2021-09-29
2000+ 浏览
广告