JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150" preserveAspectRatio="xMinYMin meet"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
        <rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>
        <rect x="0" y="0" width="100" height="30" class="rect" id="rect-1" fill="none" stroke="blue" stroke-width="1"></rect>          
        <rect x="50" y="50" width="150" height="150" class="rect" id="rect-2" fill="none" stroke="blue" stroke-width="1" transform="translate(0,0) scale(2)"></rect>        
    </svg>    
    </div>

CSS

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

JavaScript

var rects = document.querySelectorAll("rect.rect"), svg = document.querySelector("svg") , pt = svg.createSVGPoint(), svgns = svg.getAttribute('xmlns'),
    dragOffset = {},mousePressed = false, downCoords = null, startx = null, starty = null;
    onDown = function(e){        
        var st = elPtonSvg(this, this.x.animVal.value, this.y.animVal.value)
        var en = elPtonSvg(this, this.x.animVal.value+this.width.animVal.value, this.y.animVal.value+this.height.animVal.value)
        
        console.log ((en.x - st.x)*.3)
        
    }

for(var i=0;i<rects.length;i++){
    var r = rects[i];    
    attach(r, 'mousedown', onDown);    
}

function attach(el, eventName, fn){
    el.addEventListener(eventName, fn,false);
    return el;
}


function elPtonSvg(el,horizontalDistance,verticalDistance){
    var ptt = svg.createSVGPoint();
    ptt.x = horizontalDistance;
    ptt.y = verticalDistance;
    ptt = ptt.matrixTransform(el.getTransformToElement(svg))
    return ptt;
}