我在懸停時無法更改 SVG 中特定元素的顏色。我需要在 JS 而不是 CSS 中做到這一點。
該元素作為“col_05”類，我需要將滑鼠懸停在該元素上，填充顏色變為黃色。
在滑鼠移出時，填充顏色應恢復為原始顏色。
這是一個jsfiddle
在修改元素之前，您需要先獲取它。
var col_05 = window.document.getElementsByClassName('col_05')[0];
uj5u.com熱心網友回復：
這應該可以幫助您：
let elem = document.getElementsByClassName("col_05")[0]
elem.addEventListener('mouseover', function handleMouseOver() {
elem.style.fill = 'yellow';
});<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117.28 114.89">
<rect class="col_05" x="3" y="3" width="110" height="110" style="fill: #e5211e;" />
</svg>uj5u.com熱心網友回復：
使用現代原生 JavaScript Web 組件<svg-rect>和行內事件處理程式，您可以輕松地延遲或提前運行 JavaScript：
customElements.define("svg-rect", class extends HTMLElement {
connectedCallback() {
this.innerHTML = `<svg viewBox="0 0 110 110">
<rect x="3" y="3" width="110" height="110" fill="red"/></svg>`;
this.onmouseenter = (evt) => this.setColor("green");
this.onmouseleave = (evt) => this.setColor("blue");
}
setColor(color) {
this.querySelector("rect").setAttribute("fill", color);
}
});<svg-rect></svg-rect>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/526680.html