使用react调整svg rect元素的大小

Question

嗨，我是Svg的新手，我每天都在努力学习ReactJs。我有一个问题，我不知道这是否可能。我有Svg元素，我用g包装了它的元素。元素有一个rect元素，如果可能的话，我想用鼠标事件来调整它的大小，比如这个可调整大小的事件。我使用表单输入来调整它的大小，但我没有使用鼠标事件来实现这一点。我在网上没有找到正确的答案或解决方案?你能帮我解决这个问题吗?

结构:

<svg>
<g>
<rect>
//something
</rect>
</g>
</svg>

Answer 1

首先，您需要学习SVG及其几何的基础知识。如果我是你，我会从这里开始https://www.sarasoueidan.com/blog/svg-coordinate-systems/SVG——并不简单。在这种情况下，解决方案取决于您想要得到的结果。你可以用一些div包裹整个<svg>，并设置div的宽度和高度，但是width &svg、rect设置高度100%。或者你可以设置宽度&高度只适用于svg，但之后你需要设置viewBox。这是什么?阅读我在上面留下的文章。

Answer 2

您可以将svg作为一个组件

import React from 'react';
const Svg = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="" {...props}>
<path d="" />     
//something  
</svg>
);
export default Svg;

用法:

<Svg fill="red" className={classes.icon} ...props />) 

<Svg fill="#00000"  height='35px'  width='35px' ...props />)