JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<svg width="100%" height="100%" version="1.1" viewBox="0 0 4000 3000"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    onload="init()"
    onmousemove="mouseMove(evt)"
    >
        
<rect id="background" x="0" y="0" width="4000" height="3000" fill="blue" stroke="red" />
<circle id="ball" fill="green" cx="400" cy="300" r="200"/>

<text x="3000" y="200" font-size="100" fill="white">X:</text>
<text id="xpos" x="3200" y="200" font-size="100" fill="white">0</text>

<text x="3000" y="320" font-size="100" fill="white">Y:</text>
<text id="ypos" x="3200" y="320" font-size="100" fill="white">0</text>

<text id="raw" x="200" y="2800" font-size="100" fill="white"> </text>

</svg>

JavaScript

function inspect(obj) {
        var str = new Array();
        var element = null;
        for(element in obj) { str[str.length] = element; }
        str.sort();
        alert(obj + ":" + str.join(' '));
    }
    
    var bMouseDragging = false;
    var nMouseOffsetX = 0;
    var nMouseOffsetY = 0;
    var background = document.getElementById("background");
    
    function mouseDown(evt) { 
        bMouseDragging = true;

        var ball = document.getElementById("ball");
        if(ball) {
            var p = document.documentElement.createSVGPoint();
            p.x = evt.clientX;
            p.y = evt.clientY;
        
            var m = ball.getScreenCTM();
            p = p.matrixTransform(m.inverse());
           var nMouseOffsetX = p.x -parseInt(ball.getAttribute("cx"));
         var   nMouseOffsetY = p.y -parseInt(ball.getAttribute("cy"));
        }
    }
    function mouseUp(evt) { 
        bMouseDragging = false;
    }
    function mouseMove(evt) { 

        var p = document.documentElement.createSVGPoint();
        p.x = evt.clientX;
        p.y = evt.clientY;
        var bClient = true;
        
        if(bMouseDragging) {
            var ball = document.getElementById("ball");
            if(ball) {
        
                var m = ball.getScreenCTM();
                p = p.matrixTransform(m.inverse());

                ball.setAttribute("cx", p.x - nMouseOffsetX);
                ball.setAttribute("cy", p.y - nMouseOffsetY);
                bClient = false;
            }
        }
        
        displayCoords(p.x, p.y, (bClient ? " (client)" : " (svg user)"));
    }
    
    function displayCoords(x,y,extra) {
        var xNode = document.getElementById("xpos");
        var yNode = document.getElementById("ypos");
        if(xNode && yNode) {
            xNode.firstChild.nodeValue = parseInt(x) + extra;
            yNode.firstChild.nodeValue = parseInt(y) + extra;
        }
    }
    
    function displayRawText(text) {
        var textNode...