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 matrix = rect.getScreenCTM()

overlay.style.top = '0'
overlay.style.left = '0'
overlay.style.width = `${rect.width.animVal.value}px`
overlay.style.height = `${rect.height.animVal.value}px`
overlay.style.transformOrigin = '0 0'
overlay.style.transform = `matrix(${matrix.a},${matrix.b},${matrix.c},${matrix.d},${matrix.e},${matrix.f})`

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