JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<svg id="mysvg" viewBox="540 680 100 100">
<g id="object_7" transform="translate(573,703) scale(0.5,0.51)" style="pointer-events:inherit">

   <path d="m-40,-19l3,-3l74,0l3,3l0,37l-3,3l-74,0l-3,-3l0,-37z" id="uid127" stroke-linejoin="round" stroke-linecap="round" fill="#1e1d19" stroke="#000000"/>

   <path d="m-9,21l4,2l10,0l4,-2" id="uid129" stroke-linejoin="round" stroke-linecap="round" fill-opacity="0" fill="none" stroke="#000"/>

   <path d="m-40,-19l3,-3l74,0l3,3l-77,40l-3,-3l0,-37z" id="uid131" stroke-linejoin="round" stroke-linecap="round" fill-opacity="0.12" fill="#000000"/>

</g>
</svg>

JavaScript

// Get the bounding box and transform of the group
var  bbox = document.getElementById("object_7").getBBox();
var  ctm = document.getElementById("object_7").getCTM()

// Calculate the centre of the group
var cx = bbox.x + bbox.width/2;
var cy = bbox.y + bbox.height/2;

// Report the centre of the group in "group coordinates"
window.alert("centre (group coords) = ( "+cx+", "+cy+" )");

// Transform cx,cy by the groups transform
var pt = document.getElementById("mysvg").createSVGPoint();
pt.x = cx;
pt.y = cy;
pt = pt.matrixTransform(ctm);

// Report the centre of the group in "screen coordinates"
window.alert("centre (screen coords) = ( "+pt.x+", "+pt.y+" )");