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。

相关代码是：

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

Answer 2

我不认为＆＃34;宽度＆＃34;是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中修复。

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

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

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

4 个答案: