如何使用javascript获取svg中<g>标记的中间点

Question

我使用javascript在SVG标记中工作。我试图在svg中获得组标记<g>中点。是否可以使用javascript获得组标记的中点值？这是我的演示组标签<g>

<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>

这里我需要得到组标签的中点。我曾经得到鼠标协调，以获得x和y位置的中心在组标签，但我没有做到。有人能指点我吗？

Answer 1

您可以通过获取对<g>元素的引用并调用函数getBBox()来获得它的边界框。

var  bbox = document.getElementById("object_7").getBBox();

然而，请注意，这是这个组的孩子的所有包围框的联合。如果组有一个转换，则它不会反映在bbox值中。如果要向组中添加元素，这可能就是您想要的元素。

如果您想要对象在屏幕空间中的边界，那么您可以得到组元素的转换，并将其应用到您计算的中心点。

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;

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

// centre point in screen coordinates is in pt.x and pt.y

这里的演示

Answer 2

如果您想获得屏幕中g标记的绝对中间点/位置：

let el = document.getElementById("object_7")
let midX = (el.getBoundingClientRect().left + el.getBoundingClientRect().right) / 2
let midY = (el.getBoundingClientRect().top + el.getBoundingClientRect().bottom) / 2

它也适用于其他svg元素。