JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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