javascript - 使用 document.elementFromPoint 获取附近的路径

Question

对于我的网站，我希望用户能够点击各种 svg 元素。

我编写了一个快速函数，让用户可以点击封闭的形状。我基本上只是在它们上运行 document.elementFromPoint(x, y)。这适用于任何封闭的形状，因为它们具有可点击区域。但是，打开路径很难单击，因为它们的大小只有 1-2 个像素。

我想允许用户通过单击“足够近”来选择它们，例如，如果单击距路径 10 个或更少像素，则路径将被选中。我可以为此编写一个数学算法(例如，使用只输出 10 个像素的光线转换，或者将点变成 10 像素半径的圆并检查与路径的交叉点)，但我的直觉告诉我必须有更简单的方法，也许通过 CSS。

我正在考虑的一个想法是，如果出于选择目的，这条路径的笔画厚度为 10 像素，但可见厚度只有 1 像素(或者具有适用于路径而不是边界框的“填充”)。我还查看了 pointer-events，但除了边界框(我宁愿不使用它来避免选择其他形状)之外，我在那里看不到任何有用的设置。有什么我可以在 JavaScript 或 CSS 中利用的东西可以帮助我完成此任务而无需自己对路径进行数学运算(因为对于立方贝塞尔曲线等，它可能会变得难看)？

我还应该提到这是一个 HTML5 应用程序，所以我不关心向后兼容性。

Answer 1

如果路径没有笔划，那么您可以创建一个不可见的笔划 (stroke-opacity="0") 并使用 pointer-events="all"为形状提供扩展的点击区域。

如果路径确实有笔划，那么您需要在可见路径之上创建第二条不可见路径，坐标相同但笔画宽度更大。然后，您可以使用 pointer-events="all"使这条不可见路径成为命中目标，如果它被命中，您将在事件处理程序中使用react，就好像可见形状被命中一样。