如何在FireFox中获取SVG元素维度？

在大多数浏览器中，以下功能都可以使用

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

---

这是一本书。如果您在Google Chrome中试用，控制台将输出

200

。但是，FireFox返回

0

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

---

有关详细信息，请参阅。

如果无法返回SVG属性，我将返回到父维度。这是一个演示

相关代码为：

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

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

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

---

我找到的解决方案是使用

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

现在在FF 65.0.1（64位）中，svg元素的clientWidth和clientHeight始终为我返回0。铬的情况并非如此。但是getBoundingClientRect（）。宽度/高度似乎确实有效。为什么会这样？根据MDN：对于内联元素和没有CSS的元素，Element.clientWidth属性为零；否则，它是元素的内部宽度（以像素为单位）。然而，即使应用css也不能使clientWidth/Height起作用，而且它似乎不是内联的。