मैं जावास्क्रिप्ट के साथ एक स्केल किए गए एसवीजी तत्व की चौड़ाई कैसे प्राप्त करूं?

Question

अगर मैं एक तत्व जो छोटा कर दिया गया है सहित इनलाइन एसवीजी, ...

<g transform="scale(sX,sY)"> 
    <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> 
</g> 

... या जो एक viewBox विशेषता के साथ एक <svg> तत्व में है:

<svg viewBox="20 20 5000 1230"> 
    <g transform="scale(sX,sY)"> 
     <rect id="myElement" x="107" y="32" width="245" height="31" stroke="#C6C3C6" stroke-width="1px" /> 
    </g> 
<svg> 

... myElement के पिक्सल में प्रोग्रामेटिक रूप से नई स्केल वाली चौड़ाई कैसे प्राप्त कर सकते हैं - मैन्युअल रूप से स्केलिंग और गणित करने के बिना? अब तक myElement.getBBox().width स्केलिंग के लिए लेखांकन किए बिना 245 लौटाता है।

Answer 1

इस बेला http://jsfiddle.net/T723E/ देखें। आयत पर क्लिक करें और फायरबग कंसोल नोट करें। यहां मैंने हार्ड नंबर को कोड किया है .3 जो 300px चौड़ाई है जिसमें svg नोड/1000 उपयोगकर्ता इकाइयां हैं।

इनाम देखने के बाद, इस समारोह मैं वापसी बहुत बिना बढ़ाया चौड़ाई प्राप्त करने के लिए है (कोई गणित के साथ मुझे यकीन नहीं कर रहा हूँ।) Maths.Use matrix.d ऊंचाई

var svg = document.getElementById('svg'); 
    function getTransformedWidth(el){ 
     var matrix = el.getTransformToElement(svg); 
     return matrix.a*el.width.animVal.value; 
    } 

    var ele = document.getElementById('myElement_with_scale') 
    console.log("scale width----", getTransformedWidth(ele)) 

बढ़ाया जा रहा है के लिए कृपया पूर्ण कोड http://jsfiddle.net/b4KXr/

Answer 2

क्या आपने पैरामीटर की जांच की है जिसे आप getBBox() के साथ उपयोग कर सकते हैं?

http://raphaeljs.com/reference.html#Element.getBBox