将事件附加到SVG路径

Question

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

这样做的方法是什么？使用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" … />