如何使 SVG 中的 g 元素可点击答案

【问题标题】：How to make a g element in an SVG clickable如何使 SVG 中的 g 元素可点击
【发布时间】：2013-06-16 09:49:11
【问题描述】：

我知道这是一个转换分组。我还查看了文档，但没有发现任何相关信息，但想知道这是否可能。

【问题讨论】：

【解决方案1】：

用<rect width="whatever the <g> width is" height="whatever the <g> height is"/> 填充它并使<rect> 可点击。 rect 可以是透明的，查看pointer-events 属性，了解如何配置<rect> 的clicability。

你可以通过调用getBBox找到<g>的高度和宽度。

【讨论】：

用一个矩形填充整个 svg。

【解决方案2】：

将 id 分配给元素和侦听器。例如。

<g id="clickg"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/><g>

$("#clickg").on("click",function () {
    alert("click");
});

【讨论】：

【解决方案3】：

超级老问题，但它帮助了我，所以我想通过更多的分步指南和更多细节来扩展其中一个答案。这是我在我的组是几个断开连接的项目时采用的方法，我希望整个区域（包括中间的空白区域）都可以点击。

获取<g> 元素的x/y/width/height，您可以在chrome 开发工具中通过选择<g> 元素并在控制台中输入$0.getBBox() 轻松完成此操作。
创建一个新元素作为<g> 的子元素，如下所示：<rect x="TODO" y="TODO" width="TODO" height="TODO" style="pointer-events: all" />
将上面的 TODO 替换为来自getBBox 的信息

【讨论】：