JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
  <style>
   * { stroke:black; fill:white; opacity:0.8; vector-effect:non-scaling-stroke }
   rect,circle { stroke:red; fill:yellow }
  </style>
  <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" />
  <circle cx="100" cy="100" r="12.5" />
  <rect width="50" height="50" transform="translate(75,75) rotate(45) translate(-25,-25)" />
  <circle r="12.5" transform="translate(100,25) rotate(45)" />
</svg>

CSS

svg { display:block; margin:1em auto; width:400px; height:400px; border:1px solid #ccc }

JavaScript

var els = document.querySelectorAll('rect,circle');
[].forEach.call(els,showBBox);

function showBBox(el){
  var bb  = transformedBoundingBox(el),
      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('style','stroke:blue; fill:rgba(0,0,200,0.3)');
  svg.appendChild(r);
}

// Calculate the bounding box of an element with respect to its parent element
function transformedBoundingBox(el){
  var bb  = el.getBBox(),
      svg = el.ownerSVGElement,
      m   = el.getTransformToElement(el.parentNode);
  var pts = [
    svg.createSVGPoint(), svg.createSVGPoint(),
    svg.createSVGPoint(), svg.createSVGPoint()
  ];
  pts[0].x=bb.x;          pts[0].y=bb.y;
  pts[1].x=bb.x+bb.width; pts[1].y=bb.y;
  pts[2].x=bb.x+bb.width; pts[2].y=bb.y+bb.height;
  pts[3].x=bb.x;          pts[3].y=bb.y+bb.height;

  var xMin=Infinity,xMax=-Infinity,yMin=Infinity,yMax=-Infinity;
  pts.forEach(function(pt){
    pt = pt.matrixTransform(m);
    xMin = Math.min(xMin,pt.x);
    xMax = Math.max(xMax,pt.x);
    yMin = Math.min(yMin,pt.y);
    yMax = Math.max(yMax,pt.y);
  });

  bb.x = xMin; bb.width  = xMax-xMin;
  bb.y = yMin; bb.height = yMax-yMin;
  return bb;
}