그룹화 된 svg 요소의 전역 좌표를 가져 오는 방법은 무엇입니까?

Question

는 document (fiddle) 다음 내가 가진 가정 :

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

어떻게 내가이 그룹에 있다는 모르는 가정 RECT 요소의 글로벌 좌표를받을 수 있나요?

Answer 1

사실 찾기가 어려웠습니다. SVGElement의 메소드를 검색하면 SVGElement에 메소드가 없다는 페이지가 표시됩니다. 이 방법의 톤이 사실 않습니다,하지만 그들은 상속 : 당신은 당신이 요소입니다 당신이 SVGPoint를 변환하는 getCTM 또는 getScreenCTM의 결과를 사용하여 배울 수 있습니다 원하는에 따라

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

:

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