0

I have a pretty simple question, but i'm really stuck on this and can't get it working.

I have an svg that contains a rectangle with an id 'bridge'. I want to get its fill color in console.

I thought "document.getElementById('bridge').style.fill" should work but it just returns an empty string. I tried some other ways but they all didn't work.

Please help me to get rectangle's fill color with plain javascript and explain why style.fill return an empty string.

let bridge=document.getElementById('bridge');

bridge.addEventListener('click', function() { console.log(bridge.style.fill); });
<svg id="game" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 300">
  <rect id="bridge" x="200" y="100" width="200" height="300" rx="10" fill='#80c41e'/>
</svg>
nicolas
  • 11
  • 1
  • 1
  • 1
  • Use `.getAttribute("fill")` instead of `.style.fill`. – kol Nov 24 '20 at 10:35
  • kol, it returns correct color '#80c41e'. But if I change the rectangle's color in my code, it continues returning '#80c41e' even if the color is now another one. (In my case I change the color with gsap like this: gsap.to('#bridge',1,{fill: bridgeColorNew}); and the rectangle gets a new color). – nicolas Nov 24 '20 at 14:17

2 Answers2

1

Try using getAttribute() instead:

let bridge = document.getElementById('bridge');

bridge.addEventListener('click', function() {
  console.log(bridge.getAttribute('fill'));
});
<svg id="game" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 300">
  <rect id="bridge" x="200" y="100" width="200" height="300" rx="10" fill="#80c41e"/>
</svg>
sbgib
  • 5,580
  • 3
  • 19
  • 26
  • sbgib, it returns correct color '#80c41e'. But if I change the rectangle's color in my code, it continues returning '#80c41e' even if the color is now another one. (In my case I change the color with gsap like this: gsap.to('#bridge',1,{fill: bridgeColorNew}); and the rectangle gets a new color). – nicolas Nov 24 '20 at 13:48
  • @nicolas I can't speak for gsap, but I know that changing the attribute using the native JavaScript method, e.g. `bridge.setAttribute('fill', '#000000');` both updates the attribute (so that the next time you call `bridge.getAttribute('fill')` it returns `'#000000'`) and changes the colour. – sbgib Nov 25 '20 at 07:41
0

You want the computed style because you've set a mapped CSS property via an attribute so the style setting is indirect.

let bridge=document.getElementById('bridge');

bridge.addEventListener('click', function() {
console.log(window.getComputedStyle(bridge).getPropertyValue('fill')); });
<svg id="game" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 300">
  <rect id="bridge" x="200" y="100" width="200" height="300" rx="10" fill='#80c41e'/>
</svg>

Alternatively you could actually use a style rather than a mapped attribute i.e.

let bridge=document.getElementById('bridge');

bridge.addEventListener('click', function() {
console.log(bridge.style.fill);
bridge.style.fill='red'});
<svg id="game" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 300">
  <rect id="bridge" x="200" y="100" width="200" height="300" rx="10" style="fill:#80c41e;"/>
</svg>

As that makes it easier to set a new style.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Robert, it's working good, but it returns an rgb and I want to get the hex color like I defined it in svg: fill='#80c41e'. Is there a way to get hex color without converting it? – nicolas Nov 24 '20 at 13:43
  • only via the other answer i.e. calling getAttribute. They are much the same though, you can use either format in pretty much any place you like. – Robert Longson Nov 24 '20 at 14:19
  • Or do this: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb – Robert Longson Nov 24 '20 at 14:26