目前我有一个SVG组件，它有一个边界，在边界内有一个图像。我将这些svg用作地图组件上的标记，这样当用户将鼠标悬停在特定标记上时，就会发生一个事件。对于当前的SVG，只有当我将鼠标悬停在SVG的边框上而不是图像上时，才会发生此事件。所以无论如何，我可以将SVG的整个路径与图像一起作为一个单一实体。
CodeSandbox更好的参考:https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-gh75l
我的SVG:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
<clipPath id="clip">
<path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
</clipPath>
<image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
<use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</svg>
将onMouseEnter更改为onMouseOver，然后当光标在图像周围移动时弹出框将保持不变。
onMouseOver={() => {
setSelectedProperty(item);
setIsPopupShown(true);
}}