firep91613,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script>
const rect = `<svg width="500" height="250" >
<rect x="5" y="5" width="490" height="240" style="fill: white; stroke: gray; stroke-width: 5;" />
</svg>`;
document.body.insertAdjacentHTML('afterbegin', rect);
function createCicrle(cx, cy, r = 20) {
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', r);
circle.setAttribute('cx', cx);
circle.setAttribute('cy', cy);
circle.style.fill = 'red';
circle.style.strokeWidth = '1';
return circle;
}
let h = document.getElementsByTagName('rect')[0].getBBox().height;
let r = 20;
let cy = h / 2 - (r / 2);
let cx = r + 7;
document.getElementsByTagName('rect')[0].after(createCicrle(cx, cy, r));
</script>
</body>
</html>