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

标签 html firefox svg

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

  • svg.offsetWidthsvg.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/

相关文章:

javascript - PHP 表单在我将其与我的本地主机链接后无法验证(使用 MySQL 和 PHP)

html - 设置加载图标的位置

svg - 带有彩色背景的透明图标 svg 或 <i> 标签

html - 以特定 Angular 旋转图像,CSS3 还是 Canvas?

javascript - 在javascript中计算两个输入字段值

javascript - Firefox Web 扩展后台页面中的 Websocket

javascript - HTML5 音频不会在 Firefox 中播放第二次

javascript - 在 firefox 和 opera 中打开一个带有 javascript 错误的后台窗口

javascript - Raphael.js 围绕中心点的不规则路径

javascript - 以图片为背景的文字 block 隐藏效果!不透明度的线性梯度?