JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="label_text" />
<br />
<svg width="400" height="200" viewbox="0 0 400 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="layout_area" style="overflow: hidden;">
  <defs>
    <svg id="Si19krjw36" viewBox="-200 -200 400 400" width="400" height="400">
      <text id="text1" style="font-family: Arial; font-size: 25pt; text-anchor: middle;" fill="#000000" x="0" y="0">text</text>
    </svg>
  </defs>
  <rect x="0" y="0" width="400" height="200" fill="white" stroke="black"/>
  <use id="text1_use" x="-103" y="-84.09" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Si19krjw36" />
</svg>
<br /><br />
<div id="position"></div>

JavaScript

var pt;

$(document).ready(function(){

  pt = document.getElementById("layout_area").createSVGPoint();
  
  $("#layout_area").mousemove(function(event) {
    $("#position").html(event.clientX);
     
     // Convert x/y into SVG position
      pt.x = event.clientX;
      pt.y = event.clientY;
      var svg = $("#layout_area")[0]
      
      var matrix = pt.matrixTransform(svg.getScreenCTM().inverse());
      
      var pos_x = matrix.x
      var pos_y = matrix.y
      
      $("#position").append("<br />( " + pos_x.toFixed(3) + ", " + pos_y.toFixed(3) + " )");

      document.getElementById("text1_use").setAttribute("x",pos_x-200);
      document.getElementById("text1_use").setAttribute("y",pos_y-200);
  });
  
  $("#label_text").keyup(function() {
      document.getElementById("text1").textContent = $("#label_text").val().trim();
  });
});