如何检测一个点是否在复杂的不规则矢量形状（SVG）内？答案

【问题标题】：How to detect if a point is inside complex, irregular vector shape (SVG)?如何检测一个点是否在复杂的不规则矢量形状（SVG）内？
【发布时间】：2021-04-20 12:06:52
【问题描述】：

我对这一切或多或少是陌生的。我正在尝试使用 SVG 创建一个应用程序（因为我宁愿拥有可以缩放而不损失质量的矢量形状）。使用 Web 技术，后来迁移到 react-native。

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

我知道我的问题充满了限制，因此很难回答，即使指向正确的文档也会有所帮助。

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

【问题讨论】：

那么您是在尝试检测光标下的点以在 SVG 上显示悬停效果，还是更复杂一些？您是仅使用内联 SVG 还是使用 Two.js 或 D3 之类的库？
developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/…
@NickGimbal 嘿，这将是一个静态点，而不是鼠标光标。我正在寻找一个充满不同路径/形状的视图，并查看它们何时与该点相交。暂时没有其他库。 inline 这个词已经被提到过好几次了，你们指的是 HTML 内联还是块？无论如何，非常感谢您的回复！
@Kaiido 嗨，我想过这个问题，但偏执地认为这不会在所有浏览器中完全可用，那是 SVG2 对吗？感谢您的帖子！
@Sphinxxx 哇，我是在比较周围的 SVG，而不是其中的各个路径。非常有帮助，也感谢您提供的代码，它非常清楚！

标签： svg events detection point vector-graphics

【解决方案1】：

只要您使用内联 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,-25 107,50  q107,-50 53,50 z"
          stroke-width="4" fill="yellow" stroke="limegreen" />
</svg>

https://jsfiddle.net/n98m4Lrk/

【讨论】：

哇，我是在比较周围的 SVG，而不是其中的各个路径。非常有帮助，也感谢您提供的代码，它非常清楚！
感谢您的示例.. 提示顶部（thumbsup）