計算BBOX在座標系中的第n個父

Question

給出一個SVG圖形像..

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

我知道我能得到的#anchor邊框採用getBBox()的#inner座標系統相同。

但是，如何在#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) 
}