JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <svg version="1.0" viewbox="0 0 100 100">
        <rect x="0" y="0" width="100" height="100" fill="blue"/>
    </svg>
</div>

<div>
    x = <span id="x"></span><br/>
    y = <span id="y"></span>
 </div>

CSS

#container {
    width: 500px;
    height: 500px;
}

JavaScript

var x = document.getElementById("x"),
    y = document.getElementById("y"),
    svg = document.querySelector("svg");

svg.addEventListener("mousemove", function(evt) {
    var pt = svg.createSVGPoint();
    pt.x = evt.pageX;
    pt.y = evt.pageY;
    pt = pt.matrixTransform(svg.getScreenCTM().inverse());

    x.innerHTML = pt.x;
    y.innerHTML = pt.y;
}, false);