属性“ SVGResize” | &#39;onresize&#39;在&#39;SVGProps&#39;类型上不存在 <SVGSVGElement> &#39;

Question

React + SVG.

I need to handle the event of svg element resizing. I see it has the SVGResize and onresize events. I try to use each of them but I get the compilation error for each case:

const msg1 = (e: any) => console.log(`Message 1: SVG resized.`);
const msg2 = (e: any) => console.log(`Message 2: SVG resized.`);

Now I try to use my functions:

return (<svg id={this.paperId} height={height} version="1.1" 
width={width} xmlns="http://www.w3.org/2000/svg" className="paper" 
SVGResize={msg1}> </svg>);

Compilation error:

Property 'SVGResize' does not exist on type 'SVGProps'.

return (<svg id={this.paperId} height={height} version="1.1" 
width={width} xmlns="http://www.w3.org/2000/svg" className="paper" 
onresize={msg2}> </svg>);

Compilation error:

Property 'onresize' does not exist on type 'SVGProps'.

How can I fix it?

Answer 1

The onresize event is a property of global event handlers. It is the same as window.onresize and does nothing on the element level.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

If you want to redraw the svgs based on the window size you should listen for the window.onresize event and redraw based on that.