Bounding Client Rect Demo

HTML

<html>
  <body>

    <svg height="600" width="600">
      <g transform="rotate(-50, 240, 174)" fill="#A1B6FF">        
        <path transform="translate(100, 100)" 
        d="M0, 0 Q 140 128.76 280 0 v 148 Q 140 276.76 0 148 v -148z">
        </path>
      </g>
    </svg>
  </body>
</html>

CSS

svg > rect {
  fill-opacity: 0;
  stroke: black;
}

JavaScript

const svg = document.querySelector("svg");
const group = svg.firstElementChild
var { x, y, width, height } = group.getBoundingClientRect();

function translateCoordinates(svg, x, y) {
  const CTM = svg.getScreenCTM();
  return { x: (x - CTM.e) / CTM.a, y: (y - CTM.f) / CTM.d }
}

const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
var { x, y } = translateCoordinates(svg, x, y);

rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", width);
rect.setAttribute("height", height);

svg.append(rect);