JSFiddle - React, Tailwind, and code Playground

HTML

<div>
                <script>
    function clicked(evt){
        var e = evt.target;
        var dim = e.getBoundingClientRect(); 
        var x = evt.clientX - dim.left;
        var y = evt.clientY - dim.top;
			var point = document.createElementNS("http://www.w3.org/2000/svg","circle"); 
			point.setAttribute("cx",x); 
			point.setAttribute("cy",y); 
			point.setAttribute("r",10); 
			point.setAttribute("fill","green"); 
			e.parentNode.appendChild(point); 
    }                    
                </script>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 1000 1000">
                <g transform="translate(30 30)" onclick="clicked(evt)">
                    <rect x="0" y="0" width="100%" height="100%" fill="red"/>
                </g>
            </svg>  
            <hr /> 
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                <g transform="translate(30 30)" onclick="clicked(evt)">
                    <rect x="0" y="0" width="100%" height="100%" fill="red"/>
                </g>
            </svg>      
        </div>

CSS

body{
                background:black;
            }
            svg{
                fill:white;
                background:white; 
            }