JSFiddle - React, Tailwind, and code Playground

by Jools Chadwick

HTML

<div id="outer">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="inner" style="width: 100%; display: block;" focusable="false">
<g id="innerinner" pointer-events="all" fill="none">

</g>
</svg>
</div>

CSS

#outer{
  background-color:red;
  height:500px;
}

#inner{
  background-color:green;
  height:400px;
  /*visibility:hidden;*/
}

#innerinner{
  background-color:blue;
  height:300px;
  width: 100%;
}

JavaScript

function printID(){
document.body.appendChild(document.createTextNode(this.id+' '));
}

document.getElementById('outer').onmousedown=printID;
document.getElementById('inner').onmousedown=printID;