JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
        <svg viewBox="0 0 600 600" id="svg">
            <rect id="myElement_with_scale" x="0" y="20" transform="scale(4)" width="10" height="10" stroke="#C6C3C6" stroke-width="1px" ></rect>
        <svg>
    </div>

CSS

body{margin:0;}
        #test{height:600px;width:600px;border:solid red 1px;margin-left:100px}
        svg rect{pointer-events:all}

JavaScript

var matrix = document.getElementById('myElement_with_scale').getTransformToElement(document.getElementById('svg'))
    var animWidth = document.getElementById('myElement_with_scale').width.animVal.value;
    var animHeight = document.getElementById('myElement_with_scale').height.animVal.value;
    console.log("scale width, scaled height ----", matrix.a*animWidth, matrix.d*animHeight)