JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<svg width="737" height="536" viewBox="0 0 737 536" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.5277 370.998L19.6175 451.024L5.45857 456.023L0 449.934L2.52022 441.117L0 427.89L2.52022 420.962V416.973L5.45857 412.144L2.52022 394.089L12.8063 351.26L22.0438 341.333L41.1488 268.962L64.6627 248.807H71.8008L79.1489 237.488L86.4969 235.79L91.5356 237.488L94.8947 233.889L101.823 232.641L108.069 233.889L117.965 226.774L137.267 237.488L158.94 224.729L159.663 243.714L153.454 261.996L171.391 274.758L159.663 307.873V341.333L117.235 355.13L85.5001 370.998H66.5277Z" fill="#F6C345"/>
<path d="M308.598 385.265L297.829 404.065L308.598 418.086L365.14 444.03L375.208 495.384L403.835 524.05L542.432 535.307C538.211 531.32 530.866 523.487 535.256 524.05C539.646 524.613 522.407 516.918 513.239 513L488.952 503.285L482.226 504.353L481.478 508.73L473.471 513L469.094 508.089L442.936 495.384L429.27 493.249L421.583 480.437L419.127 475.099L431.939 463.675L433.434 455.24L439.413 450.329L452.545 444.03L458.097 447.34L462.261 445.845L466.211 434.208L463.755 427.802L459.271 421.396L462.261 418.086L468.773 419.154L471.656 418.086V411.466L488.205 401.751L495.785 405.274L503.472 407.836L506.355 410.185L511.693 406.982L524.825 400.363L537.637 401.751H549.595L556.535 406.982L563.901 400.363L570.628 399.509L582.479 407.836L586.322 404.74L585.468 395.665L590.806 394.491L593.582 396.84H605.54L609.811 391.288L613.227 392.676L617.605 381.038L637.356 382.426L644.082 389.58L646.004 387.444L653.264 381.038H656.787L660.524 380.184L661.272 374.526L662.66 371.323L670.667 372.711L679.635 367.906L680.703 364.703L684.76 364.063L683.586 356.696L680.703 352.105L682.838 342.71L688.71 343.884L691.807 342.71L692.447 331.926L693.835 329.898H701.202L708.996 323.385V313.135L714.441 306.302L717.857 309.399H720.847L723.516 306.302L736.328 301.071L729.602 286.978L709.957 289.754L706.86 287.939H701.202L695.864 282.921L690.952 283.455L688.604 281.426L690.952 277.049V268.401L700.561 264.771V250.784L689.778...

CSS

body{
  margin: 0;
  padding: 10px;
}

body::before{
  content: "Clique em um pin para mostrar a posição.";
  font-weight: bold;
}
svg{
  margin-top: 40px;
}
g path{
  fill: rgba(0,0,0,0) !important;
  cursor: pointer;
}

.modal-position{
  position: absolute;
  width: 80px;
  background-color: #000;
  color: #fff;
  display: none;
  padding: 8px;
  font-size: 14px;
  transform: translateY(50px) translateX(20px);
}

.y::before{
  content: "Y: ";
}
.x::before{
  content: "X: ";
}
.y::after{
  content: "%";
}
.x::after{
  content: "%";
}

JavaScript

$("g path, circle").click(function(e){
	e.stopPropagation();
	
  
  const parentPos = $("svg")[0].getBoundingClientRect();
  const childPos  = $(this)[0].getBoundingClientRect();
  const relativePos = {};

  relativePos.top    = childPos.top - parentPos.top,
  relativePos.right  = childPos.right - parentPos.right,
  relativePos.bottom = childPos.bottom - parentPos.bottom,
  relativePos.left   = childPos.left - parentPos.left;
  
  var x = relativePos.left / $("svg").width() * 100;
	var y = relativePos.top / $("svg").height() * 100;
  
  console.log(relativePos);
  
  x = x.toFixed(2);
  y = y.toFixed(2);
  
  
  $(".modal-position").css({
  	left: relativePos.left,
    top: relativePos.top
  }).show();
  $(".x").text(x);
  $(".y").text(y);
});

$(document).click(function(e){
  $(".modal-position").hide();
});

$(".modal-position").click(function(e){
	e.stopPropagation();
});

$("body").append('<div class="modal-position"><div class="x"></div><div class="y"></div></div>');