SVG Overlay Pointer-Events

by klodoma

HTML

<div>
  <div class="stage-item stage-item-id-76845 stage-item-shape" id="stage-item52">
    <svg height="576" version="1.1" width="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden;position: relative;left: -0.09375px;top: -0.09375px;" class="paper-items">
      <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc>
      <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
      <path fill="#223369" stroke="none" d="M0,0L100,0L100,100L0,100Z" x="31" y="29" transform="matrix(3.37,0,0,3.576,233.5,114.2)" stroke-width="0" stroke-opacity="1.0" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1"
      fill-opacity="1.0" vector-effect="non-scaling-stroke" class="el-seq-7591 el-model-7591-76845 el-model-76845" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 1; fill-opacity: 1; cursor: pointer;"></path>
      <rect x="32" y="290" width="100" height="100" rx="0" ry="0" fill="#440000" stroke="#000" stroke-width="8.389261744966444" stroke-opacity="1" fill-opacity="1" class="el-seq-7591 el-model-7591-76845 el-model-76845" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 0; fill-opacity: 0; cursor: pointer;"
      transform="matrix(3.37,0,0,3.576,125.66,-922.84)"></rect>
    </svg>
  </div>
  <div class="stage-item stage-item-id-76627 stage-item-channel" id="stage-item53">
    <svg height="576" version="1.1" width="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: -0.09375px; top: -0.09375px;" class="paper-items">
      <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc>
      <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs>
      <path fill="none" stroke="#0000a4"...

CSS

.stage-item {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  pointer-events: auto;
  z-index: 3000;
}