javascript - 将事件附加到 SVG 路径

Question

我的 html 中有一个带有<svg>标签的 SVG 地图。我想附加事件，以便我可以单击它们并触发一些事件。我知道我可以在多边形元素上使用 jQuery 附加点击事件。但是这张地图中的某些区域是使用路径制作的，当我在路径内部而不是路径上单击时，我想触发一些事件。

这样做的方法是什么？首选使用 jQuery。

Answer 1

如果您fill在其中<path>单击（在填充上）将触发事件处理程序：

演示：http: //jsfiddle.net/TmsrP/1/

<path id="sauce" fill="#f00" … />    

$('#sauce').on('click',function(){ … });

您可以选择使用颜色显式填充路径，transparent并且仍然会捕获鼠标事件：

演示：http: //jsfiddle.net/TmsrP/2/

<path fill="transparent" … />