Question

给出一个类似于......的SVG图形。

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

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

但是，如何在#anchor的坐标系中获得#outer的边界框？

也许使用像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)
}

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

1 个答案: