Reputation: 9
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
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.
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
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
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