如何在SVG中點擊一個g元素

Question

我知道它是一個轉換的分組。我也瀏覽了文檔，並沒有發現任何關於此的內容，但想知道是否可能。

Answer 1

用<rect width="whatever the <g> width is" height="whatever the <g> height is"/>填充它並使<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"); 
});