SVG: Change fill color on hover with JS

Question

I am having troubles changing the color of a specific element in a SVG on hover. I need to do that in JS and not CSS.

The element as a class "col_05" and I would need that on hover on that element, the fill color change to yellow.

On mouseout then the fill color should be back to the original.

Here is a jsfiddle

https://jsfiddle.net/y7qr6xse/2/

What I tried

<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;"/>
<script>    
col_05.addEventListener('mouseover', function handleMouseOver() {
  col_05.style.fill = 'yellow';
});
</script>
</svg>

Answer 1

With a modern native JavaScript Web Component <svg-rect> and inline Event handlers you have no issues with running JavaScript late or early:

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>

Answer 2

You first need to get the element before doing anything else. Here's a working fiddle:

https://jsfiddle.net/c0x2r5Le/

the part that made it work:

const element = document.querySelector('.col_05');

element.addEventListener('mouseover', function handleMouseOver() {
  this.style.fill = 'yellow';
});

element.addEventListener('mouseout', function handleMouseOver() {
  this.style.fill = '#e5211e';
});

Answer 3

Try adding this in a style file

#Ebene_1:hover {
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);
}

This is where I found it: How to change the color of an svg element?

And here's a codepen for converting hexcode to the filter for wanted color: https://codepen.io/sosuke/pen/Pjoqqp

Answer 4

Before you modify the element, you need get it first.

var col_05 = window.document.getElementsByClassName('col_05')[0];

Answer 5

This should help you:

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>