JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<svg xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; width="500" height="500"> <g transform="translate(30 30)" id="gSquare"><rect id="rect1" x="0" y="0" width="50" height="50" fill="red"/></g> </svg>

JavaScript

$( document ).ready(function() {
$('#gSquare').on('click', function(e){
	e.preventDefault();
  clicked(e);
});

function clicked(evt){
    e = evt.target;
    dim = e.getBoundingClientRect();
    x = evt.clientX - dim.left;
    y = evt.clientY - dim.top;
		console.log(x + ' ' + y);

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

    });
}
});