JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="mysvg" width="400" height="400">
    
    <circle cx="100" cy="100" r="80" class="st24" fill="red"/>
    <circle cx="300" cy="100" r="80" class="st24" fill="green"/>
    <circle cx="100" cy="300" r="80" class="st24" fill="blue"/>
    <circle cx="300" cy="300" r="80" class="st24" fill="orange"/>

</svg>

JavaScript

var svgElement = document.getElementById("mysvg");

var st24 = svgElement.getElementsByClassName("st24");

// Set all circles to no fill.
// They will now all be invisible.
$.each(st24, function(i, val) {
    val.setAttribute("fill", "none");
});

// Set svg root fill to green.
// This will have no effect because the fill="none" on the circles
// will still have precedence
svgElement.setAttribute("fill", "#008000");

// Remove the fill from all circles.
// Now the circles will be all green (from the root fill)
// because the circles no longer have no over-riding fill
$.each(st24, function(i, val) {
    val.removeAttribute("fill");
});

// Now set the first circle to red
st24[0].setAttribute("fill", "red");