Question

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

我编写了一个快速功能，让用户点击封闭的形状。我基本上只是对它们运行document.elementFromPoint(x, y)。这适用于任何封闭的形状，因为它们具有可点击的区域。然而，打开路径很容易点击，因为它们只有1-2个像素。

我想允许用户通过点击“足够接近”来选择它们，这样如果点击是例如距路径10个或更少的像素，则将选择路径。我可以为此编写一个数学算法（例如，使用Ray-Casting只能输出10个像素，或者将点转换为10px-radius圆并检查路径的交叉点），但我的直觉告诉我必须有一个更简单的方法，也许是通过CSS。

我想到的一个想法是，如果这条路径的笔划是10像素厚，用于选择目的，但只有1像素厚可见（或具有适用于路径而不是边界框的'填充'）。我也看了pointer-events，但除了边界框（我宁愿不使用以避免选择其他形状），我没有看到任何有用的设置。有没有什么我可以利用JavaScript或CSS来帮助我实现这一目标而不用自己的路径数学（因为它可能会让立方beziers变得丑陋等等）？

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

Answer 1

如果路径没有笔划，那么你可以创建一个不可见的笔划（stroke-opacity =＆＃34; 0＆＃34;）并使用pointer-events =＆＃34; all＆＃34;使形状延伸到命中区域。

如果路径确实有笔划，那么您需要在可见路径的顶部创建第二条不可见路径，其路径相同但行程宽度更大。然后你可以使用pointer-events =＆＃34; all＆＃34;使这个不可见的路径成为命中目标，如果它被击中，你会在事件处理程序中作出反应，就好像可见的形状被击中一样。

Answer 2

Robert Longson描述了如何做到这一点，但我想补充一些细节。

首先，如果您不想要，则无需复制或创建新几何体。您还可以使用＆lt; use＆gt;元件。即使其他一些看不见的元素悬停，你也可以使用一些css给形状赋予不同的外观。

<style>
  g { fill: #ddd; stroke: black; pointer-events: none; }
  use { pointer-events: all; stroke-width: 40; fill: none; stroke-opacity: 0; }
  use:hover + * { fill: cornflowerblue; }
<g>
  <use xlink:href="#c"/>
  <circle id="c" cx="50" cy="60" r="20"/>
</g>

请参阅live example。

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

2 个答案: