如何将 javascript onmouseover 函数与 svg 一起使用来获取类名？

Question

我有一个 SVG 地图，当鼠标悬停在地图的某个区域上时，我想更改侧面板上的文本。我想将文本更改为包含鼠标悬停区域的锚点的类名。目前，每当我将鼠标悬停在地图上时，它 return 在侧面板中未定义。

我尝试将代码设置为仅在类名不等于 nil 时才起作用，并且该函数没有触发，所以我不能在鼠标悬停时获取锚标记。

HTML（删除了不相关的代码）

<p onmouseover="houseQuickOverview()">
    <svg ... >
        <g id="G_Areas" ... >
            <a class="HD-002" ... >
                <path gg:cat="2" d="M ... />
            </a>
            <a class="HD-003" ... >
                <path gg:cat="2" d="M ... />
            </a>

JavaScript

let houseQuickOverview = function () {
        let district = this.className;
        document.querySelector(".districtNumber").innerHTML = district;

}

当我将鼠标悬停在包含 SVG 的段落上时，当鼠标触摸其中一个锚点时，我希望它 return 将锚点的类名 div。目前只有 return 未定义到 div。

Answer 1

试试下面的方法，在你的具体情况下，你可能需要像这样缩小 els

const anchor = document.querySelectorAll("p a"); // to select only <a> under <p>

(function() {
  const anchor = document.querySelectorAll("a")
  for (const a of anchor) {
    a.addEventListener('mouseover', function(event) {
      document.getElementById('result').innerHTML = event.currentTarget.className;
    })
  }
})();

#result {
  color: red;
}

a {
  display: block;
  margin: 1em;
}

<a class="HD-002">
                123
            </a>
<a class="HD-0022">
                456
            </a>
<a class="HD-0023">
                789
            </a>
<a class="HD-0024">
                101112
            </a>

<div id="result"></div>

如何将 javascript onmouseover 函数与 svg 一起使用来获取类名？

How do I use javascript onmouseover function with svg to get classname?

html

javascript

svg

classname