CODEWITHSUNDEEP
javascript
Dpie
Dpie

Reputation: 9

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

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?

Upvotes: 0

Views: 1170

Answers (3)

MrMaavin
MrMaavin

Reputation: 1741

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>

Upvotes: 3

DiabloSteve
DiabloSteve

Reputation: 431

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.

Upvotes: 0

Nikko Khresna
Nikko Khresna

Reputation: 1009

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

Upvotes: -1

Related Questions