firefox - 如何在 FireFox 中获取 SVG 元素尺寸？

Question

在大多数浏览器中，以下内容将起作用。

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

这是一个演示。如果您在 Google Chrome 中尝试，控制台将输出200. 但是，FireFox 会返回0.

Answer 1

如果无法返回 SVG 属性，我最终会退回到父尺寸。这是一个演示http://jsbin.com/uzoyik/1/edit。

相关代码是：

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

Answer 2

我不认为“宽度”是 getBoundingClientRect 方法返回的对象的标准跨浏览器属性。我通常会做类似的事情：

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

Answer 3

此 Firefox 错误已在 2014 年 10 月 14 日发布的 Firefox 33 中修复。

有关详细信息，请参阅错误 530985。

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