如何使 SVG 中的 ag 元素可点击

Question

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

Answer 1

用<rect width="whatever the <g> width is" height="whatever the <g> height is"/>填充它， <rect width="whatever the <g> width is" height="whatever the <g> height is"/> ，并使<rect>可点击。 rect可以透明检查指针事件属性，以了解如何配置<rect>可引用性。

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

Answer 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");
});

Answer 3

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

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