如何将SVG组元素转换为根SVG的中心？

问题：如何将SVG组元素的中心转换为根SVG的中心。我试图在

元素上使用

transform=“translate（x，y）”

，但此转换将仅针对group元素的左上角进行转换

示例案例和目标：在以下SVG中，两个矩形

与

一起分组假设我们不知道组中元素的位置、大小和类型。我们只知道父SVG的宽度/高度。目标是将组的中心（两个矩形的边界框）转换为根SVG的中心。问题是，我们不知道“边界框”（即组本身）的高度/宽度，因此单独使用

transform=“translate（x，y）”

无法到达根SVG的中心

<svg width="500px" height="300px" preserveAspectRatio="none" viewBox="0,0,5.0,3.0">
    <g transform="translate(0,0)>
        <rect x="1" y="0.25" width="0.5" height="0.5" fill="green" />
        <rect x="1.25" y="1" width="0.5" height="0.5" fill="red" />
    </g>
</svg>

你需要一些方法来计算。我正在使用Javascript：


const SVG\u NS=http://www.w3.org/2000/svg';
const svg=document.querySelector（“svg”）；
//svg元素的viewBox已拆分
让svgVB=svg.getAttribute（“viewBox”）.split（/[，]+/）；
设o=test.getBBox（）；
设oCenter={}//g#测试元素的中心
o中心x=o.x+o.width/2；
o中心y=o.y+o.height/2；
//变换属性的值
设tr=`
翻译（${-oCenter.x}，${-oCenter.y}）
翻译（${svgVB[2]/2}，${svgVB[3]/2}）`；
test.setAttributeNS（null，“transform”，tr）；
//为了调试，我正在绘制边界框
setAttributeNS（null，“transform”，tr）；
函数drawRect（o，父级）{
让rect=document.createElements（SVG_NS，'rect'）；
for（将名称输入o）{
rect.setAttributeNS（null，name，o[name]）；
}
parent.appendChild（rect）；
返回矩形；
}
drawRect（o，bbox）
svg{border:1px solid；}

遍历的内容并计算整个边界框。在python中，假设所有的元素都是rect元素，就可以做到这一点。假设我不知道元素中有哪些元素，因此我无法迭代每个元素。如果我这样做，我将不得不使用Python中的另一个库来解析SVG，这将使事情变得复杂。我发布了这个问题，希望能有一些转换技巧，或者修改元素的坐标系以实现最终目标。@zythy您找到任何解决方案了吗？这个解决方案应该适合您，或者至少提供了一条前进的道路：您不仅使用了Javascriot，还使用了API函数
.getBBox（）
。为此，你需要1。一种渲染器，实际计算包含的元素和2的大小和位置。该API的一个实现。它可以在浏览器中工作，但远远超出了“Python中的基本计算”。