代码之家 › 专栏 › 技术社区 › Jan Wolfram

如何增加svg路径的hitbox?

svg css html

Jan Wolfram · 技术社区 · 6 年前

我已经编写了一个快速功能,让用户点击封闭的形状。我基本上只是跑 document.elementFromPoint(x, y)

我希望允许用户通过单击“足够靠近”来选择它们,这样,如果单击距离路径10或更少像素,则将选择路径。我可以为此编写一个数学算法(例如,使用仅输出10像素的光线投射,或者将点转换为10像素半径的圆并检查与路径的交点),但我的直觉告诉我,一定有一种更简单的方法,也许是通过CSS。

我想的一个想法是,如果这条路径的笔划为10像素厚,但只有1像素厚的可见(或有一个'填充'将适用于路径,而不是边界框)。我也看过 pointer-events ,但是除了边界框(我不想使用它来避免选择其他形状)之外,我在那里看不到任何有用的设置。在JavaScript或CSS中,有什么东西可以帮助我在不自己计算路径的情况下完成这项工作(因为对于立方beziers等,它可能会变得很难看)?

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

0 回复 | 直到 12 年前

Robert Longson 12 年前

如果路径没有笔划,则可以创建不可见笔划(笔划不透明度为0),并使用指针事件为形状提供扩展的命中区域。

如果路径确实有笔划,则需要在可见路径的顶部创建第二个不可见路径,其坐标相同,但笔划宽度更大。然后可以使用pointer events=“all”将此不可见路径设置为命中目标,如果命中,则在事件处理程序中做出反应,就像命中了可见形状一样。

Erik Dahlström 12 年前

<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