JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <img  id="inner" src="http://placekitten.com/300/300"></img>
    <svg pointer-events="all" id="svg" height="300" version="1.1" width="300" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="300" height="300" stroke="black" stroke-width="0" fill="none"></rect></svg>
</div>

CSS

#outer {
    position: relative;
}

#inner {
    position: absolute;
    z-index: 1;
    
    left: 0;
    top: 0;
    background: red;
}

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

JavaScript

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