计算HTML页面中SVG元素的大小

Question

如何可靠地询问SVG元素在主页上占用的大小(以像素为单位)？

• 无论svg.offsetWidth和svg.getBoundingClientRect().width工作在Chrome V34.
• 这些都不能在Firefox v29中正常工作.(前者为空,后者返回不正确的值.)

测试页面:http://jsfiddle.net/dL5pZ/3/

这个问题的动机是为这个答案获得可靠的实现,这需要知道元素外部的宽高比.此外,对于这个问题,我需要知道SVG的实际大小,或者至少在不同的调用和调整大小元素之间返回比例值的东西.

Answer 1

我以前一直在那条路上.不幸的是,大多数获取<svg>元素大小的函数都在Firefox中出错.我找到的唯一可行解决方案是使用window.getComputedStyle(svgElement).width(或height),需要对其进行解析(并且仅在svgElement.display =='block'时才有效,这在您的示例中).我已经采用你的小提琴在Firefox中工作:http://jsfiddle.net/dL5pZ/5/

更新:显示'内联'的问题在不久前在Firefox 29中得到修复.

更新2:如另一个答案所述,getBoundingClientRect现在也应该工作.