मैं समूहबद्ध 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