拉斐尔 - 如何通过边界框选择路径？

Question

我是svg和raphael.js的新手。我的任务是制作一个交互式图表 - 用户点击/触摸一行，空格打开以显示一些文本元素。我有这个工作，但线是一个非常小的目标。

有没有办法让用户点击边界框而不是路径？我看到了getBBox（）但是没有看到我如何将它用于此目的。

Answer 1

你可以做的一件事是克隆你的路径，将它推回到你感兴趣的线后面，改变属性，使它更厚，几乎完全透明，并把你的事件处理程序放在这一行。

像this

这样的东西

当然，你必须清理它......

Answer 2

在此行后面绘制相同背景颜色的粗线，并将其用作目标。

Answer 3

您可以在要捕获mouseevents的元素上使用pointer-events="boundingBox"。请参阅SVG Tiny 1.2 spec。

这是一个example。

不幸的是，我不认为大多数浏览器都支持它。虽然Opera确实如此。