JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<div id="display">Click to see the coordinate</div>
<div id="container">
    <svg id="svg" version="1.0" viewbox="0 0 100 100">
        <rect x="0" y="0" width="100" height="100" fill="blue"/>
        <circle id="circle" cx="10" cy="10" r="3" fill="green"></circle>
    </svg>
</div>

CSS

* {margin: 0; padding:0;}
#display {min-height: 20px; text-align: center;}
#container {
    width: 60vw;
    height: 60vh;
    margin: 0 auto;
}

JavaScript

const svg = document.getElementById("svg");
const display = document.getElementById("display");
const circle = document.getElementById("circle");

svg.addEventListener("mousemove", function(evt) {
    const pt = svg.createSVGPoint();
    pt.x = evt.pageX;
    pt.y = evt.pageY;
    const point = pt.matrixTransform(svg.getScreenCTM().inverse());
    
    display.innerHTML = `(x: ${point.x}, y: ${point.y}) - (pageX: ${evt.pageX}, pageY: ${evt.pageY})`;
    
    // Right position
    circle.setAttribute('cx', point.x);
    circle.setAttribute('cy', point.y);
}, false);