JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="padding:0px; border:1px solid red;">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000px" height="1000px">
    <circle cx="100" cy="100" r="10" fill="#4285f4" class="extremum"></circle>
  </svg>
</div>

CSS

#container {
  position: relative;
  width: 600px;
  height: 600px;
}

circle {
  pointer-events:none;
}

JavaScript

document.getElementById('container').onclick = function clickEvent(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
  var y = e.clientY - rect.top; //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
}


 function getOffset(element, relative) {
        var bound = element.getBoundingClientRect();

        return {
            top: bound.top + window.pageYOffset - relative.clientTop,
            left: bound.left + window.pageXOffset - relative.clientLeft,
        };
    }

            const parent = document.getElementById('container');


 document.querySelectorAll('.extremum').forEach((extremum) => {
                const { top, left } = this.getOffset(extremum, parent);

                console.log(top);
                console.log(left);
            });