SVG 标记 onHover 事件(图表)

Question

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

例如(简化):

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

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

Answer 1

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

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

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

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