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();元素的边界框。

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

但请注意，这是该组儿童的所有边界框的并集。如果组具有变换，则不会反映在bbox值中。如果要向组中添加元素，则可能是您想要的元素。

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

{{1}}

Demo here

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元素。

如何使用javascript </g>获取svg中<g>标签的中点数

2 个答案: