Chrome SVG marker element onmouseover

2019-06-24 07:09发布

I've got an SVG embedded in HTML with a marker definition. The marker definition is simply a circle with an onmouseover event. I then use the marker on a path like so...

<...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...>

The onmouseover event works on the element, but not on each of the path markers. I'd like the path markers to behave the same way. What's a good way to do this?

1条回答
可以哭但决不认输i
2楼-- · 2019-06-24 07:46

The specification explicitly states that "Event attributes and event listeners attached to the contents of a 'marker' element are not processed; only the rendering aspects of 'marker' elements are processed."

Which is a pity.

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

查看更多
登录 后发表回答