Retrieve a computed svg color with javascript

Question

I've got a CSS variable that dynamically sets the background color of an SVG element with a CSS variable.

Now I wanted to write a unit test that checks if the color is set properly on the object. Unfortunately, I can't seem to retrieve this value with javascript.

I've created a jsfiddle with my current unsuccessful progress: https://jsfiddle.net/Lmfjdc4e. Upon pressing the checkColor button the wrong fill and background-color attribute is written into the console.

Can I even retrieve the correct computed color of a svg element? If yes how?

Here is the complete source of the jsfiddle:

function checkColor() {
  var circle = document.getElementById('circle');
  var style = window.getComputedStyle(circle);
  var fill = style.getPropertyValue('fill');
  var bgColor = style.getPropertyValue('background-color');

  console.log(fill) //url(#myGradient)
  console.log(bgColor) //rgba(0, 0, 0, 0)
}

.myClass {
  --background-color: rgb(255, 0, 0)
}

<svg xmlns="http://www.w3.org/2000/svg" class="myClass" viewBox="0 0 300 200" height="150">
  <defs>

    <linearGradient id="myGradient">
      <stop offset="0" stop-color="var(--background-color)" />
    </linearGradient>
  </defs>
  <circle id="circle" cx="50" cy="165" r="35" fill="url(#myGradient)"/>
</svg>

<button onClick="checkColor()">checkColor</button>

I'm a bit confused because the url references a gradient ('image') not a color so what is it you actually want to find? The gradient could contain lots of colors - it isn't a 'color' in the CSS sense (if you see what I mean). Do you want to find the color at a specific position within the SVG? — A Haworth, Feb 15 '21 at 08:09
I see what you mean and the problem with my (simplified) question. Is it then possible to retrieve the rendered color at one specific pixel within the svg? Something like a pipette tool? It shouldn't matter then if there was an image, a real gradient or solid color disguised as gradient. — Vulcano, Feb 15 '21 at 08:39
I sort of feel that the answer from @kaiido in [link]https://stackoverflow.com/questions/27230293/how-to-draw-an-inline-svg-in-dom-to-a-canvas should help, but so far the rendered canvas circle has turned out black for me, hopefully someone will know more. — A Haworth, Feb 15 '21 at 08:47

Trevor Kropp · Accepted Answer · 2021-02-15T08:47:17.730

2

You need to get the exact property you are setting. In this case, it will be the following:

var bgColor = style.getPropertyValue('--background-color');

The dashes affect the name of the property.

Edit:

See the following jsfiddle: https://jsfiddle.net/x90fcLd8/11/

Evaluating the url on the fly for the fill seems to be the only way to get the correct color.

edited Feb 15 '21 at 08:47

answered Feb 15 '21 at 07:17

Trevor Kropp

219
1
7

The main reason why I wanted to write this unit test was because the colors on different shapes were the same. (I had the same ID on the linear gradient). The CSS variables were set correctly. Although your solution works, the test wouldn't have spotted the problem. That's why I wanted the computed color on the shape. See this JSFiddle: https://jsfiddle.net/f6syubwj/ – Vulcano Feb 15 '21 at 07:50
That's indeed an interesting way to solve the question. My current hack is to compare the two identifier of the circles (what I don't like). With this solution I can compare it at least with a color. I'll wait a bit. Maybe there is something which seems less hacky but nevertheless thank you for your solution. – Vulcano Feb 15 '21 at 12:40

Retrieve a computed svg color with javascript

1 Answers1