计算坐标系中第n个父级的bbox

Question

给定一个 SVG 图形，例如..

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

我知道我可以使用getBBox()在#inner的坐标系中得到#anchor的边界框。

但是，我怎样才能在#outer 的坐标系中获得#anchor 的边界框？

也许使用像 Raphaël 或 snap.svg 这样的库（我自己试过但失败了......）。

Answer 1

如果您只使用翻译，使用目标的 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)
}