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

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>

You can access the element like that if you use `id` instead of `class`. Like `id="col_05"`. — Lain, Nov 02 '22 at 08:40

何聊生 · Answer 1 · 2022-11-02T08:37:02.627

0

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

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

edited Nov 02 '22 at 08:37

answered Nov 02 '22 at 08:32

何聊生

179
8

1

Please don’t use images to show your code. Create a [snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) instead – HackerFrosch Nov 02 '22 at 08:36
1

@HackerFrosch added the main code – 何聊生 Nov 02 '22 at 08:50

Blind Sanji · Answer 2 · 2022-11-02T08:34:14.880

0

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

edited Nov 02 '22 at 08:34

answered Nov 02 '22 at 08:33

Blind Sanji

3
3

score 0 · Answer 3 · answered Nov 02 '22 at 08:34

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';
});

score 0 · Answer 4 · answered Nov 02 '22 at 08:43

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>

score 0 · Answer 5 · answered Nov 02 '22 at 15:13

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>

SVG: Change fill color on hover with JS

5 Answers5