你遇到的问题其实特别常见——为啥之前的代码拿不到ID？因为你实际点击的是<g>里面的<path>或者<text>子元素呀，这些子元素本身没设ID，ID都在它们的父级<g>标签上，所以event.target拿到的是子元素，自然输出的ID是空的。

给你几个简单靠谱的解决方案：

方案1：用closest()向上找目标组（最推荐） #

这个方法会从你点击的元素开始，往上遍历DOM树，找到最近的带ID的<g>元素，不管子元素嵌套多少层都能生效，非常健壮。

代码示例：

document.addEventListener('click', function (event) {
  // 精准查找最近的带ID属性的<g>标签
  const targetGroup = event.target.closest('g[id]');
  if (targetGroup) {
    console.log("点击的组ID：", targetGroup.id);
  } else {
    console.log("没有点击到带ID的组元素");
  }
});

closest('g[id]')的作用是只匹配带有id属性的<g>元素，避免误匹配到页面上其他没有ID的g标签。

方案2：直接给<g>绑定点击事件 #

你也可以跳过监听整个文档，直接给所有带ID的国家组绑定点击事件。因为事件冒泡的机制，点击组内的子元素（path/text）时，会触发父级<g>的点击事件，这时候this或者event.currentTarget就指向这个<g>元素，能直接拿到ID。

代码示例：

// 获取页面上所有带ID的<g>元素
const countryGroups = document.querySelectorAll('g[id]');
// 给每个组单独绑定点击事件
countryGroups.forEach(group => {
  group.addEventListener('click', function () {
    console.log("点击的组ID：", this.id);
    // 也可以用 event.currentTarget.id 来获取ID
  });
});

这种方式的好处是更精准，只会处理你关心的国家组的点击，不会响应页面上其他无关元素的点击。

方案3：直接取父元素（仅适合固定简单结构） #

如果你的SVG结构特别固定——<path>和<text>的直接父级就是那个带ID的<g>，也可以用parentElement直接取父元素。但这种方式不够灵活，如果后续SVG结构变了（比如中间多了其他嵌套元素）就会失效，所以只推荐在结构完全确定的场景下用。

代码示例：

document.addEventListener('click', function (event) {
  const parentGroup = event.target.parentElement;
  // 验证父元素确实是带ID的<g>标签
  if (parentGroup && parentGroup.tagName === 'G' && parentGroup.id) {
    console.log("点击的组ID：", parentGroup.id);
  }
});

总的来说，方案1和方案2是最实用的，你可以根据自己的代码场景来选~