javascript - 鼠标悬停时的 Chrome SVG 标记元素

Question

我在 HTML 中嵌入了一个带有标记定义的 SVG。标记定义只是一个带有 onmouseover 事件的圆圈。然后我在这样的路径上使用标记...

<...html...>
<svg>
<defs>
    <marker id="point" refX="5" refY="5" markerWidth="10" markerHeight="10">
        <circle id="p2" cx="5" cy="5" r="3" fill="black" opacity=".5" onmouseover="console.log('YES!');" />
    </marker>
</defs>

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"
 style="marker-mid: url(#point);" fill="none" stroke="black" />
<use xlink:href="#p2" x="20" y="20">
</svg>
<...html...>

onmouseover 事件作用于元素，但不适用于每个路径标记。我希望路径标记的行为方式相同。执行此操作的好方法是什么？

Answer 1

规范明确指出“不处理附加到‘marker’元素内容的事件属性和事件监听器；仅处理‘marker’元素的呈现方面。”

可惜了。

http://www.svgbasics.com/markers.html