JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<svg xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="500" height="500" onclick="clicked()"> <g transform="translate(30 30)" ><rect id="rect1" x="0" y="0" width="50" height="50" fill="red"/></g> </svg>

JavaScript

$( document ).ready(function() {
	$('svg').on('click', function(evt){
  	var e = evt.target;
    var dim = e.getBoundingClientRect();
    var x = evt.clientX - dim.left;
    var y = evt.clientY - dim.top;

    console.log(evt);

    $.ajax({
      type: "POST",
      url: 'play.php',
      data: {X: x },
      success: function(data)
      {
        alert("success! X:" + data);
      }

    });  
  });
});