JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
  <g id="grid">
    <path d="M0,50 L150,50 M0,100 L150,100 M50,0 L50,150 M100,0 L100,150" />
    <path d="M0,25 L150,25 M0,75 L150,75 M0,125 L150,125
             M25,0 L25,150 M75,0 L75,150 M125,0 L125,150" style="opacity:0.4" />
  </g>
  <circle cx="100" cy="100" r="12.5" />
  <rect width="50" height="50" transform="translate(75,75) rotate(45) translate(-25,-25) " />
</svg>

CSS

svg { display:block; margin:1em auto; width:400px; height:400px; border:1px solid #ccc }
* { stroke:black; fill:white; opacity:0.8; vector-effect:non-scaling-stroke }
rect,circle { stroke:red; fill:yellow }
.bounding-box { stroke:blue; fill:rgba(0,0,200,0.3) }

JavaScript

var r = document.querySelector('rect'),
    c = document.querySelector('circle');

showBBox(c);
showBBox(r);

function showBBox(el){
  var bb  = el.getBBox(),
      svg = el.ownerSVGElement,
      r   = document.createElementNS(svg.namespaceURI,'rect');
  r.setAttribute('x',      bb.x );
  r.setAttribute('y',      bb.y );
  r.setAttribute('width',  bb.width );
  r.setAttribute('height', bb.height );
  r.setAttribute('class','bounding-box');
  svg.appendChild(r);
}