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

Question

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

• svg.offsetWidth 和 svg.getBoundingClientRect().width 均适用于 Chrome v34。
• 这些都不能在 Firefox v29 中正常工作。 (前者为空，后者返回错误值。)

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

这个问题的动机是为 this answer 获得可靠的实现，这需要知道元素外部的纵横比。此外，对于 this question我需要知道 SVG 的实际大小，或者至少需要知道在不同调用和调整大小的元素之间返回比例值的内容。

Answer 1

我以前也走过这条路。不幸的是，大多数用于获取 <svg> 大小的函数元素在 Firefox 中有问题。我发现唯一可行的解​​决方案是使用 window.getComputedStyle(svgElement).width (或 height )，需要对其进行解析(并且也仅在 svgElement.display == 'block' 时有效，在您的示例中)。我已经采用你的 fiddle 在 Firefox 中工作:http://jsfiddle.net/dL5pZ/5/

更新:显示“内联”的问题 was fixed some time ago围绕 Firefox 29。

更新 2:如前所述 in another answer , getBoundingClientRect现在也应该工作。