javascript - 将事件附加到 SVG 路径

Question

我的 html 中有一个 SVG map ，其中包含 <svg>标签。我想附加事件，以便我可以单击它们并触发一些事件。我知道我可以使用 jQuery 在多边形元素上附加单击事件。但是此 map 中的某些区域是使用路径创建的，我想在单击路径内部而不是路径上时触发一些事件。

有什么方法可以做到这一点？首选使用 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" … />