JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg id="mySvg" onload="init()" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 800.4286 800.5047" style="transform: translate3d(20px, 20px, 0)">

<script xlink:href="snap.svg-min.js" type="text/ecmascript"/>
<script>
var mySvg, hoverTarget,  viewboxText;

function init(){
  mySvg=Snap("#mySvg");
  hoverTarget=mySvg.select("#hoverTarget"); 
  viewboxText=mySvg.select("#viewboxText");
  hoverTarget.mousemove(hoverCursor);
}

function hoverCursor(evt){
  var cursorX, cursorY;
  if(evt.type==="mousemove"){
    console.log(evt)
    cursorX=evt.clientX;
     /*this is my question : how to interrogate the evt object to get X position of the cursor 
    according to mySvg viewbox?*/
    cursorY=evt.clientY;
    //and, of course, how to get Y position from the evt object..
    

    var m = Snap.matrix( evt.target.getScreenCTM().inverse() )
    var newX = m.x( cursorX, cursorY )
    var newY = m.y( cursorX, cursorY )
    viewboxText.attr({text : "X : " + cursorX + ", Y : " + cursorY  + '...' + newX + ' : ' + newY});
    Snap( evt.target ).paper.circle(newX, newY, 10)
  }
}
</script>
<rect id="blackRect" style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" ry=".16344" height="773.5" width="1371.4" y="161.71" x="-371.43" fill="#ffb380"/>
<rect id="hoverTarget"   style="color-rendering:auto;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;image-rendering:auto" ry=".098402" height="177.14" width="286.62" y="369.51"...