JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="100" height="200" fill="red"/>
    <svg xmlns="http://www.w3.org/2000/svg" id="top">
      <rect x="0" y="0" width="200" height="100" fill="rgba(0,0,255,0.4)"/>
    </svg>

</svg>

CSS

svg#top {
  pointer-events: none;
}


rect:hover {
  fill: black;
}