How to make a g element in an SVG clickable

Question

I understand that it is a grouping for transformations. I have also looked through the documentation and have found nothing regarding this, but was wondering whether it is possible.

Answer 1

Assign id to element, and listener. Ex.

<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 2

Fill it with a <rect width="whatever the <g> width is" height="whatever the <g> height is"/> and make the <rect> clickable. The rect can be transparent check out the pointer-events property for how to configure clicability of the <rect>.

You can find the <g> height and width by calling getBBox.