JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="position:relative">
    
<svg id="svg" height="300" version="1.1" width="300" xmlns="http://www.w3.org/2000/svg">

    <rect x="3" y="3" width="100" height="100" stroke="black" stroke-width="0" fill="none"></rect></svg>




<img src="http://placekitten.com/300/300" id="inner" style="position:absolute;left:0;top:0;width:300px;height:300px;background-color: red"></img>






</div>

CSS

#outer {
    position: relative;
}

#inner {
    position: absolute;    
    left: 0;
    top: 0;
    background: red;
}

#svg {
    position: absolute;
    z-index: 3;    
    left: 0px;
    top: 0px; 
    overflow-x: hidden;
    overflow-y: hidden;
}

JavaScript

$("#svg").mousedown(function(){ alert("svg received mousedown"); });