如何在svg中使用javascript onmouseover函数获取类名？

Question

我有一个SVG地图，当将鼠标悬停在地图的某个区域时，我想在其中更改侧面板上的文本。 我想将文本更改为包含鼠标悬停区域的锚的类名。 当前，每当我将鼠标悬停在地图上时，它都会在侧面板中返回undefined。

我尝试将代码设置为仅在类名不等于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的段落上时，当鼠标触摸锚点之一时，我希望它将锚点的类名返回给districtNumber div。 当前，它仅将undefined返回div。

Answer 1

请尝试以下操作，在特定情况下，您可能需要缩小els这样的范围

const anchor = document.querySelectorAll("pa"); // 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>