将事件附加到SVG路径 [英] attach events to SVG paths

问题描述

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

I have a SVG map in my html with the <svg> tag. and I want to attach events so I can click them and trigger some events. I know I can attach click event using jQuery on polygon elements. But some areas in this map are made using paths and I'd like to trigger some events when I click inside the paths, not on the paths.

通过什么方式去做？首选使用jQuery。

What's the way to do that? Using jQuery is preferred.

推荐答案

如果你填写 a < path> 然后在其中单击（在填充上）将触发事件处理程序：

If you fill a <path> then clicking inside it (on the fill) will trigger the event handler:

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

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

您可以选择使用颜色透明和鼠标事件仍将被捕获：

You can choose to explicitly fill the path with the color transparent and mouse events will still be caught:

<path fill="transparent" … />

这篇关于将事件附加到SVG路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！