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="50" r="20" fill="url(#myGradient)"/>
</svg>

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" class="myClass2" viewBox="0 0 100 100" height="150" >
  <defs>
  </defs>
  <circle id="circle1" cx="50" cy="50" r="20" fill="url(#myGradient)"/>
</svg>

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

CSS

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

.myClass2 {
  --background-color: rgb(0,255,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(bgColor) //rgba(0, 0, 0, 0)

 	var circle1 = document.getElementById('circle1');
  var style1 = window.getComputedStyle(circle1);
  var fill1 = style1.getPropertyValue('fill');
  var bgColor1 = "";
  if (fill1.startsWith('url') && fill1.includes('#')) {
  	var matchId = fill1.match(/url\("#([^)]+)"\)/);
    if (matchId != null && matchId.length == 2) {
    	var urlId = matchId[1];
 			var urlElem = document.getElementById(urlId);
  		var urlCompStyle = window.getComputedStyle(urlElem);
      bgColor1 = urlCompStyle.getPropertyValue('--background-color');
    }
  }

  console.log(bgColor1) //rgba(0, 0, 0, 0)
}