获取 SVG 元素的边界框

Question

我正在动态加载 SVG 文档，然后需要在显示之前提取 SVG 中某些元素的位置。有没有办法获得例如 x,y 元素的 rect 坐标，并应用该元素及其父元素的所有变换？

假设我的 SVG 如下所示：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1.4142057, 0, 0, 1.4142057, 0, 0)">
    <rect x="25" y="50" width="100" height="200"/>
  </g>
</svg>

我碰巧使用 d3 来加载这个：

    d3.xml('/static/node.svg')
        .then(data => {
            var x = d3.select(data)
                .select("rect")
                    .getBBox().x;
            console.log(x);
        });

但是 getBBox() 在这种情况下似乎总是返回全零。有没有办法在不实际显示图像的情况下将所有变换应用于元素的参数？

一种将所有变换整理成单个变换矩阵（无需手动解析所有变换）并将其应用于任意向量的方法。

编辑：getCTM()在SVG不显示时也返回null，不是很有用。