如何在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

我不认为"width"是getBoundingClientRect方法返回的对象的标准跨浏览器属性.我通常会这样做:

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