将事件附加到SVG路径

Question

我有一个包含 <svg> 标签的 SVG 地图，我希望能够附加事件，使我可以单击它们并触发一些事件。 我知道可以使用 jQuery 在多边形元素上附加 click 事件。但是这个地图中的某些区域是使用路径（path）制作的，我希望在路径内单击时触发一些事件，而不是在路径上单击时触发。

如何实现？最好使用 jQuery。

- Gnijuohz

---

请阅读此网页：https://dev59.com/3W855IYBdhLWcg3w-JXR。 - voodoo417

请提供一个 http://jsfiddle.net 的演示以便进行工作。 - Jared Farrish

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" … />

- Phrogz

---

不幸的是，这在Opera 12.12中不起作用。 它会用黑色填充路径 :( - Radu

事实证明，您可以将fill-opacity设置为0，然后就可以继续了！ - Radu

此解决方案不支持无障碍或键盘导航。 - Greg Tatum

如果您将路径包含在锚标记中，则可以访问它：http://jsfiddle.net/TmsrP/489/。 - Greg Tatum

在我的问题中，一位FireFox开发人员指出 fill="transparent"会强制浏览器渲染填充（恰好是透明的），而你想要的只是检测鼠标悬停，这正是pointer-events属性专为此设计的。我通过使用fill="none"和<style> path { pointer-events: visibleFill } </style>来解决了这个问题。 - Mawg says reinstate Monica

对于不想使用 jQuery 的人：document.getElementById("mypath").addEventListener('click', event => { }); - Jesper