फ़ायरफ़ॉक्स में एसवीजी तत्व आयाम कैसे प्राप्त करें?

Question

अधिकांश ब्राउज़रों में, निम्नलिखित काम करेंगे।

window.onload = function(){ 
    console.log(document.getElementById('svgElm').getBoundingClientRect().width); 
}; 

यहाँ एक demo है। यदि आप इसे Google क्रोम में आज़माते हैं, तो कंसोल 200 आउटपुट करेगा। हालांकि, फ़ायरफ़ॉक्स 0 देता है।

Answer 1

यदि एसवीजी गुणों को वापस नहीं किया जा सकता है तो मैं पैरेंट आयामों पर वापस आ गया हूं। यहां एक डेमो http://jsbin.com/uzoyik/1/edit है।

प्रासंगिक कोड है:

svg.clientWidth || svg.parentNode.clientWidth 
svg.clientHeight || svg.parentNode.clientHeight 

Answer 2

यह फ़ायरफ़ॉक्स बग फ़ायरफ़ॉक्स 33 जो अक्टूबर 2014

पर 14 जारी किया गया था जानकारी के लिए bug 530985 देखें में तय हुई थी।

Answer 3

मुझे नहीं लगता कि "चौड़ाई" वस्तु getBoundingClientRect विधि द्वारा वापस की एक मानक क्रॉस-ब्राउज़र संपत्ति है। मैं आमतौर पर कुछ ऐसा करता हूं:

var box = el.getBoundingClientRect(); 
var width = box.right-box.left; 
var height = box.bottom-box.top; 

Answer 4

इसके लिए मैंने जो समाधान पाया वह .getComputedStyle() का उपयोग करना था। और चूंकि svg तत्व पुराने IE8- ब्राउज़र में समर्थित नहीं हैं, .getComputedStyle() लगातार परिणाम देने का तरीका है।

var heightComponents = ['height', 'paddingTop', 'paddingBottom', 'borderTopWidth', 'borderBottomWidth'], 
    widthComponents = ['width', 'paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth']; 

var svgCalculateSize = function (el) { 

    var gCS = window.getComputedStyle(el), // using gCS because IE8- has no support for svg anyway 
     bounds = { 
      width: 0, 
      height: 0 
     }; 

    heightComponents.forEach(function (css) { 
     bounds.height += parseFloat(gCS[css]); 
    }); 
    widthComponents.forEach(function (css) { 
     bounds.width += parseFloat(gCS[css]); 
    }); 
    return bounds; 
};