为什么我的SVG组件上的点击事件没有触发？

Question

我有一个svg文件（世界地图），其中包含了用于形成每个国家的path，这些国家本身被分组到代表各大洲的g元素中 - 结构如下：

<svg id="worldmap" viewBox="100 0 8334 4171">
  <g id="Asia" class="wm-cont">
    <path id="AF" d="M5707.92,1390.83l-22.5, etc...
    ...

当点击一个大洲时，我希望能够将其放大，因此我编写了以下适用于亚洲的jQuery代码：

$(document).ready(function() {
    $("#Asia").click(function() {

        // hide all continents
        $(".wm-cont").css("display", "none");

        // show Asia
        $("g.wm-cont#Asia").fadeIn();

        // shift the continent into view
        $("g.wm-cont#Asia").setAttribute("transform", "translate(-400,439) scale(0.032,-0.032");
    });
});

我点击后没有任何反应，为什么？我尝试将选择器改为g#Asia和类似的选择器，但是没有任何变化。

非常感谢您提供的任何帮助。

---

更新

由于某种原因，现在这个问题已经解决：

$(document).on('click', '#Asia', function() {
    alert("Asia");
});

虽然我没有改变svg的结构，但它依然有效。欢迎任何有关于为什么这个方法可以奏效的想法:-)

- marcusmerkel

Answer 1

一个 g 元素只是一个空容器，它本身不能触发事件。把 rect 放在你的 g 中并尝试。

 <rect x="0" y="0" width="100" fill= "white" height="100"></rect>

示例演示

document.querySelector("#Asia").addEventListener("click", () => alert("clicked"))

<svg width="300" height="300">
  <g id="Asia">
    <rect x="0" y="0" width="100" fill= "gray" height="100"></rect>
  </g>
</svg>

- mr. pc_coder

---

非常感谢 - 我只是不明白，我的<g id="Asia>包含了很多路径，这些路径本身有由CSS给定的填充值，所以区域并不为空。那是否仍然会有很大的差别呢？ - marcusmerkel