Here is the test code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
<title>xyz</title>
</head>
<body>
<div>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg"
width="360" height="360">
<line x1="1" y1="1" x2="359" y2="359" stroke="black"/>
<circle cx="100.00" cy="100.00" r="25.17" fill="#00ffff"
stroke="red"/>
</svg>
</div>
</body>
<script>
// used all over
const svgNS = "http://www.w3.org/2000/svg";
let svg_el = document.getElementById("mysvg");
let sh_el = document.createElementNS(svgNS, "rect");
sh_el.setAttributeNS(svgNS, "x", "150");
sh_el.setAttributeNS(svgNS, "y", "150");
sh_el.setAttributeNS(svgNS, "stroke", "blue");
sh_el.setAttributeNS(svgNS, "width", "10");
sh_el.setAttributeNS(svgNS, "height", "40");
svg_el.appendChild(sh_el);
</script>
</html>
In Firefox using the inspector I see the line, circle and rect elements but the rect does not display. I’ve looked at other Stackoverflow answers and I don’t think it’s a name-space issue. My best guess is that the DOM is not updated but I don’t know how that could happen