JSFiddle - React, Tailwind, and code Playground

by kenny12

HTML

<h1>Beginning</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"viewbox = "0 0 5 5">
    <g fill="none" stroke="black" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
        <rect x="1" y="0" width="1" height="2"
  style="fill:blue;stroke:grey;stroke-width:5;fill-opacity:0.1;
  stroke-opacity:0.9"/>
    </g>
</svg>
<h2>The end</h2> 
<div id="op"></div>

JavaScript

var svg = document.getElementsByTagName('svg')[0];
var pt = svg.createSVGPoint();
var el1 = document.getElementsByTagName('rect')[0];

var log_svgcursorPoint,
    log_mouseclick,
    log_mousecoord;


function svgcursorPoint(evt){
    pt.x = evt.clientX; pt.y = evt.clientY;
    var a = svg.getScreenCTM();
    log_svgcursorPoint = "offset based on svg"+ " x:" + a.e +" y:" + a.f;
    var b = a.inverse();
    return pt.matrixTransform(b);
};
(function(elem){
    elem.addEventListener('mousedown',function(e){
        log_mouseclick = "mouse clicked at"+ " x:" + e.clientX +" y:" + e.clientY ;
        var svgmouse   = svgcursorPoint(e);    
        log_mousecoord = "svg mouse at"+ " x:" + svgmouse.x +" y:" +svgmouse.y;
       document.getElementById('op').innerHTML = log_svgcursorPoint + "<br>" + log_mouseclick + "<br>" + log_mousecoord;
        },false);
    })(el1);
(function calc_manually(){
    var rec = document.getElementsByTagName("rect")[0];
    var root = document.getElementsByTagName("svg")[0];
    var x = rec.getAttribute("x");
    var y = rec.getAttribute("y");
    var CTM = root.getScreenCTM();
    // How to get the mouse position these information without using events is the problem.
})();