JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: auto;">
<rect width="500.335" height="339.177" transform="translate(1387.25 528.472) rotate(120)" fill="#C4C4C4"></rect>

</svg>

<div class="overlay"></div>

CSS

.overlay {
  position: fixed;
  border: solid #1a74d9 2px;
  pointer-events: none;
}

JavaScript

let svg = document.querySelector('svg')
let overlay = document.querySelector('.overlay')
let rect = svg.children[0]


let bounds = rect.getBoundingClientRect()
let matrix = rect.getCTM()

overlay.style.top = bounds.top + 'px'
overlay.style.left = bounds.left + 'px'
overlay.style.width = bounds.width + 'px'
overlay.style.height = bounds.height + 'px'
overlay.style.transform = `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},0,0)`

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};
Math.degrees = function(radians) {
  return radians * 180 / Math.PI;
};