FireFoxでSVG要素の寸法を取得するには？

Question

ほとんどのブラウザでは、次のように動作します。

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

ここにはdemoがあります。 Google Chromeで試してみると、コンソールに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のバグは詳細を参照してくださいbug 530985 10月14日、2014年に

をリリースされたFirefoxの33で修正されました。

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; 
};