SVG 标记 onHover 事件（图表）

【问题标题】：SVG Marker onHover Event (Graph)SVG 标记 onHover 事件（图表）
【发布时间】：2013-09-26 04:56:21
【问题描述】：

我正在构建自己的折线图，想知道如何在悬停时使<path> 线交互。

例如（简体）：

<path d="M5,10L10,20L30,40"></path>

当用户将鼠标悬停在5,10 或10,20 上并显示<circle> 或一般只是一个命令时，我将如何执行悬停事件？是我遗漏了什么还是我必须检测鼠标的位置？

【问题讨论】：

编辑了代码，我没有复制我的实际代码，所以我没有注意到错误。我现在将搜索标记。
w3.org/TR/SVG/painting.html#Markers 因为我无法编辑旧评论。
是的，那将是点，但我想我真的在寻找如何将事件附加到这些标记上？ stackoverflow.com/questions/6796332/…。我不明白这怎么可能，我希望图表具有该功能。

标签： svg

【解决方案1】：

SVG 有一个称为标记的概念，它允许将任意形状添加到路径节点但标记不能接收事件，per the last line in the SVG marker specification text。

不处理附加到“标记”元素内容的事件属性和事件侦听器；仅处理“标记”元素的渲染方面。

如果您认为这应该改变，take it up with the w3c SVG group。

如果您想响应事件，您必须手动创建自己的形状并确保它们恰好位于正确的点。

【讨论】：

这可能会在 SVG2 中得到支持，请参阅 svgwg.org/svg2-draft/painting.html#Markers，尤其是第 11 期“使交互作用于定位标记”。
那么如果路径悬停，获取鼠标的x,y并选择离这些坐标最近的点？
当然，getPointAtLength 可能会有所帮助。
在研究了那是什么之后，我不确定我应该将它用于 XD 的用途，您能否详细说明。我找到了一个脚本，它在路径悬停时返回 svg 的坐标。 jsfiddle.net/EfJx8