如何在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>