Chrome SVG标记元素onmouseover [英] Chrome SVG marker element onmouseover

问题描述

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

 < ... html ...> 
< svg> 
< defs> 
< marker id =pointrefX =5refY =5markerWidth =10markerHeight =10> 
 < / marker> 
< / defs> 
 
<路径d =M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110
 style =marker-mid：url（#point）; fill =nonestroke =black/> 
< use xlink：href =＃p2x =20y =20> 
< / svg> 
< ... html ...> 
  

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

解决方案

规范明确指出：事件属性和事件侦听器附加到'marker'元素没有被处理;只有'marker'元素的渲染方面被处理。

这是一个遗憾。

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

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?

解决方案

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

这篇关于Chrome SVG标记元素onmouseover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！