如何在FireFox中獲得SVG元素的尺寸？

Question

在大多數瀏覽器中，以下都是可行的。

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

這是demo。如果您在谷歌瀏覽器中試用它，控制檯將輸出200。但是，FireFox返回0。

Answer 1

如果無法返回SVG屬性，我最終會回落到父維度。這裏是一個演示http://jsbin.com/uzoyik/1/edit。

的relavent代碼是：

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

Answer 2

這個Firefox錯誤是固定在Firefox 33發佈於10月14日2014年

見bug 530985瞭解詳情。

Answer 3

我不認爲「寬度」是由getBoundingClientRect方法返回的對象的一個​​標準的跨瀏覽器特性。我通常會這樣做：

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

Answer 4

我找到的解決方案是使用.getComputedStyle()。由於舊版IE8瀏覽器不支持svg元素，因此.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; 
};