Is it possible to change the fill color of an svg chart using javascript?

Question

In the backend, the following graph is being generated:

<svg width="911.4" height="300">
     <g transform="translate(40,20)">
     <g>
     <g fill="#6d6e71">
     <rect x="1" y="180" height="0" width="62"></rect>
     <rect x="66" y="180" height="0" width="62"></rect>
     <rect x="131" y="180" height="0" width="62"></rect>
     <rect x="196" y="180" height="0" width="62"></rect>
     <rect x="261" y="180" height="0" width="62"></rect>
     <rect x="326" y="159" height="21" width="62" fill="#6d6e71"></rect>
     <rect x="391" y="180" height="0" width="62"></rect>
     <rect x="456" y="180" height="0" width="62"></rect>
     <rect x="521" y="180" height="0" width="62"></rect>
     <rect x="586" y="161" height="19" width="62"></rect>
     <rect x="651" y="180" height="0" width="62"></rect>
     <rect x="716" y="166" height="14" width="62"></rect>
     <rect x="781" y="180" height="0" width="62"></rect>
     </g>
     </g>
     </svg>

Is there a way I could change the fill="#6d6e71" value in the frontend just using javascript?

Is the SVG within the page, or is it an image element that points to an SVG file? — Reinstate Monica Cellio, Jan 23 '19 at 12:58

MrMaavin · Answer 1 · 2019-01-23T13:14:24.280

With setAttribute() you can change fill. See W3School

Use

//find first element with "someAttr" attribute
document.querySelector('[someAttr]')

or

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]')

to find elements with an specific attribute.

See SO-Question

var elment = document.querySelector('[fill]');
elment.setAttribute("fill", "#ff0000");

var rect = document.querySelector('svg g rect[fill]')

rect.setAttribute("fill", "#ffff00");

<svg width="911.4" height="300">
     <g transform="translate(40,20)">
     <g>
     <g fill="#6d6e71">
     <rect x="1" y="180" height="0" width="62"></rect>
     <rect x="66" y="180" height="0" width="62"></rect>
     <rect x="131" y="180" height="0" width="62"></rect>
     <rect x="196" y="180" height="0" width="62"></rect>
     <rect x="261" y="180" height="0" width="62"></rect>
     <rect x="326" y="159" height="21" width="62" fill="#6d6e71"></rect>
     <rect x="391" y="180" height="0" width="62"></rect>
     <rect x="456" y="180" height="0" width="62"></rect>
     <rect x="521" y="180" height="0" width="62"></rect>
     <rect x="586" y="161" height="19" width="62"></rect>
     <rect x="651" y="180" height="0" width="62"></rect>
     <rect x="716" y="166" height="14" width="62"></rect>
     <rect x="781" y="180" height="0" width="62"></rect>
     </g>
     </g>
     </svg>

Was just wondering again if it's possible to change different fills? I basically have five fill="#6d6e71" with different color values and I want to change these color values with different values again :| @MrMaavin — Dpie, Jan 23 '19 at 13:09
YOu can get only the first element with `document.querySelector('svg g')` and the second element with `document.querySelector('svg g rect[fill]')` — MrMaavin, Jan 23 '19 at 13:12

DiabloSteve · Answer 2 · 2019-01-23T13:05:22.130

0

Both element with fill can be changed. You need to select it and change the "fill" attribute like this:

Change global "fill" attribute:

var elment = document.querySelector('svg g');
elment.setAttribute("fill",[color]);

Change inner "rect" element's "fill" attribute:

var elment = document.querySelector('svg g rect[fill]');
elment.setAttribute("fill",[color]);

[color] need to thange to color value, for example: #123456 Is there any other element, where you need to change the fill? If possible, the jQuery can be usefull to use $.each to change the elements "fill" attribute as you wish.

edited Jan 23 '19 at 13:05

answered Jan 23 '19 at 13:01

DiabloSteve

431
2
13

he asked for a javascript solution. – MrMaavin Jan 23 '19 at 13:03

score -1 · Answer 3 · answered Jan 23 '19 at 13:04

Yes the <g> tag can receive id or class attribute...those are which you will have to change with js.

Sample:.

.blue {
    fill: blue;
}
.green {
    fill: green;
}

Then
<g class="blue" id="my-path">

Them you change the class of <g> to green with js.
document.getElementById('my-path').classList.remove('blue') document.getElementById('my-path').classList.add('green')

Is it possible to change the fill color of an svg chart using javascript?

3 Answers3