Svg 在第n个父坐标系中计算bbox

给出一个SVG图形，比如

<svg>
  <g id="outer" transform="...">
    <g id="middle" transform="...">
      <g id="inner" transform="...">
        <rect id="anchor" ... />
      </g>
    </g>
  </g>
</svg>

我知道我可以使用getBBox在内部坐标系中获得锚的边界框

但是，我如何才能得到锚在坐标系中的边界框，比如说，外部

---

也许像我一样使用库，或者我自己尝试过，但失败了…

如果您只使用翻译，那么使用目标的getCTM是没有问题的

尝试：

    <svg id="mySVG" width="400" height="400" >
      <g id="outer" transform="translate(30,40)" onmouseover=outerBB(evt) >
        <g id="middle" transform="translate(130,40)">
          <g id="inner" transform="translate(30,140)" >
          <rect id="anchor" x="10" y="10" width="100" height="100" fill=red />
          </g>
        </g>
      </g>
      <rect id=bbRect pointer-events="none" fill=none stroke='blue' stroke-width="3" />
    </svg>


    function outerBB(evt)
    {
        var target=evt.target
        var bb=target.getBBox()
        var bbx=bb.x
        var bby=bb.y
        var bbw=bb.width
        var bbh=bb.height
        var sctm=target.getCTM()
        var pnt=mySVG.createSVGPoint()
        pnt.x=bbx
        pnt.y=bby
        var PNT = pnt.matrixTransform(sctm);
        bbRect.setAttribute("x",PNT.x)
        bbRect.setAttribute("y",PNT.y)
        bbRect.setAttribute("width",bbw)
        bbRect.setAttribute("height",bbh)
}