我如何可靠地询问 SVG 元素在主页上占用的大小(以像素为单位)?
svg.offsetWidth
和svg.getBoundingClientRect().width
均适用于 Chrome v34。- 这些都不能在 Firefox v29 中正常工作。 (前者为空,后者返回错误值。)
测试页:http://jsfiddle.net/dL5pZ/3/
这个问题的动机是为 this answer 获得可靠的实现,这需要知道元素外部的纵横比。此外,对于 this question我需要知道 SVG 的实际大小,或者至少需要知道在不同调用和调整大小的元素之间返回比例值的内容。
最佳答案
我以前也走过这条路。不幸的是,大多数用于获取 <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
现在也应该工作。
关于html - 计算 HTML 页面中 SVG 元素的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23684821/