Resizable svg rect element using react

user_8955676 0
Viewed 397

Hi I am new at Svg and I am trying to learn ReactJs day by day. I have a question and I do not have any idea whether it is possible. I have Svg element and I wrapped element of its with g. g element has one rect element and I want to make it resizeable with mouse event such as this resizable event here if it's possible.I did it resizable with value using form input but i did not achive that with using mouse event. I did not find a correct answer or solution on web? Could you help me at this issue ?

Here is structure :

 <svg>
     <g>
        <rect>
           //something
       </rect>
     </g>
 </svg>
reactjs svg javascript
2 Answers

First of all you need learn basics of SVG and its geometry. If I were you, I would start here https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG - is not simple. In your case solution depends on what you want to get as a result. You can wrap whole <svg> with some div, and set div's width and height, but width & height of svg, rect set 100%. Or you can set width & height only for svg, but after it you need set viewBox. What is it? Read articles that I left above.

user_107376930

You can make SVGs as a component

import React from 'react';

const Svg = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="" {...props}>

    <path d="" />     

    //something  

  </svg>
);
export default Svg;

Usage:

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


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