グループ化されたsvg要素のグローバル座標を取得するにはどうすればよいですか？

Question

はdocument (fiddle)次私が持っていると仮定します。

<svg> 
    <g transform="translate(50,50)"> 
     <rect width="20" height="20" style="fill:black;"> 
    </g> 
</svg> 

がどのように私はそれがグループ内だと知っていないと仮定すると矩形要素のグローバル座標を得るのですか？

Answer 1

実際に見つけるのは難しいことでした。 SVGElementのメソッドを検索すると、SVGElementにはメソッドがありませんというページが表示されます。それは実際にはメソッドのトンを持っていますが、それらは継承されています

http://www.w3.org/TR/SVG/types.html#InterfaceSVGLocatable

あなたがSVGPointを変換するためにgetCTMまたはgetScreenCTMの結果を使用することができますしたい内容に応じて、あなたの要素がどこにあるように学びます：

root = document.getElementById('root') 
rec = document.getElementById('rec') 
point = root.createSVGPoint() 
# This is the top-left relative to the SVG element 
ctm = rec.getCTM() 
console.log point.matrixTransform(ctm) 
# This is the top-left relative to the document 
ctm = rec.getScreenCTM() 
console.log point.matrixTransform(ctm) 

http://jsfiddle.net/kitsu_eb/ZXVAX/3/

Answer 2

あなたはバウンディングボックスを取得する機能.getBoundingClientRect()を使用することができます。次に、height,width,topおよびleftの値を使用して、要素の中心位置を探します。

https://developer.mozilla.org/es/docs/Web/API/Element/getBoundingClientRect