I’m puzzled by SVG fills. I can’t seem to set the fill of a rect with styling, and I can’t set the fill of a rect with Javascript. With this test program, element cal23 is black. Element cal24 is transparent, showing the underlying yellow through, but the Javascript doesn’t set the fill color to red.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Test of setting background color</title>
<style>
body {background-color:yellow;}
</style>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20.2 11"
>
<style>
#cal23 {fill="none';}
</style>
<rect id="cal23" width="10" height="10" x="0" y="0" stroke-width="0.2" stroke="orange"/>
<text x="5" y="5" font-size="1.5" text-anchor="middle" fill="black">Test</text>
<rect id="cal24" width="10" height="10" x="10" y="0" stroke-width="0.2" stroke="pink" fill="none"/>
<text x="15" y="5" font-size="1.5" text-anchor="middle">Test</text>
</svg>
<script>
document.getElementById('cal23').style.backgroundColor = "red";
document.getElementById('cal24').style.backgroundColor = "red";
console.log('Ran setColor on cal23 and cal24');
</script>
</body>
</html>