如何使SVG中的g元素可单击

Question

我知道它是转换的分组。我也查看了文档并且没有发现任何相关内容，但是想知道是否可能。

Answer 1

使用<rect width="whatever the <g> width is" height="whatever the <g> height is"/>填充并点击<rect>。 rect可以透明检查pointer-events属性，了解如何配置<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");
});