React中SVG视口定位导致onMouseOver事件异常的动态绘图问题

我在React新项目中需要实现以下效果：将图片渲染为组件，在图片上方用SVG绘制框，为此已通过CSS设置绝对定位。但在给每个绘制的框绑定onMouseOver函数时遇到了问题：

• 必须将SVG的viewport调整为仅包含绘制的框，否则鼠标悬停图片和进入矩形时都会触发onMouseOver函数——因为目前只能给SVG viewport绑定事件，无法直接绑定到矩形上。但调整viewport后，由于CSS的绝对定位，该设置会被忽略。
• 矩形需基于获取的动态数据绘制，无法在CSS中硬编码位置。

示例代码 #

import React from "react";
import { SVGProps } from "react";

const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 2050" {...props}>
    <rect
      x={190}
      y={300}
      width={300}
      height={200}
      style={{
        fill: "none",
        stroke: "darkred",
        strokeWidth: "10",
        pointerEvents: "visible",
      }}
    />
  </svg>
);

export default () => (
  <div>
    <SvgComponent
      onMouseOver={() => {
        console.log("Mouse over detected");
      }}
    />
    <img src="https://wallup.net/wp-content/uploads/2016/04/06/338054-landscape-Sun.jpg" />
    <style>
      {`
      svg {
        position: absolute;
        z-index: 0;
      }
    `}
    </style>
  </div>
);

内容的提问来源于stack exchange，提问作者Timo