如何检测一个点是否在复杂的不规则矢量形状 (SVG) 内？

如何解决如何检测一个点是否在复杂的不规则矢量形状 (SVG) 内？

我或多或少对这一切都很陌生。我正在尝试使用 SVG 创建一个应用程序（因为我更喜欢可以在不损失质量的情况下缩放的矢量形状）。使用网络技术，后来迁移到 react-native。

有什么方法可以让我找出一个点（x,y 也由 CSS 的 left 和 top 属性决定）是否在一个高度复杂的内部，不规则，矢量形状？

我知道我的问题有很多限制，这让我很难回答，即使指出正确的文档也会有所帮助。

PS：我尝试了 elementFromPoint() 方法，但它返回了 DOM 放置在我的 SVG 周围的边界矩形。这完全违背了我的目的，我想确保仅在 SVG 路径和形状本身中检测到该点。任何帮助表示赞赏，谢谢！

解决方法

只要您使用内联 SVG，elementFromPoint() 应该可以正常工作：

const shape = document.querySelector('#shape'),status = document.querySelector('#inout');

document.body.addEventListener('mousemove',function(e) {
    const x = e.clientX,y = e.clientY;
    
    if(document.elementFromPoint(x,y) === shape) {
        status.className = status.textContent = 'inside';
    }
    else {
        status.className = status.textContent = 'outside';
    }
});

h2 { margin: 0; }

.inside { color: lime; }
.outside { color: red; }

<h2>The cursor is: <span id="inout" class="outside">outside</span></h2>

<svg xmlns="http://www.w3.org/2000/svg" width="250" height="200">
    <path id="shape" d="M150,120  q26,75 -80,50  c-80,-25 -53,-125 -26,-125  c53,-25 107,50  q107,-50 53,50 z"
          stroke-width="4" fill="yellow" stroke="limegreen" />
</svg>

https://jsfiddle.net/n98m4Lrk/