getBoundingClientRect，内联 SVG 的高度值不正确
Posted
技术标签:
【中文标题】getBoundingClientRect，内联 SVG 的高度值不正确【英文标题】：getBoundingClientRect, incorrect height value for inline SVG 【发布时间】：2013-09-27 22:09:42 【问题描述】：<body style="width:1000px;height:1000px;">
<div id="d" style="display:inline-block;">
<svg id="s" xmlns="http://www.w3.org/2000/svg" version="1.1" >
<rect style="fill:rgb(0,0,255);"/>
</svg>
</div>
</body>
var div = document.getElementById('d');
var rect = div.getBoundingClientRect();
alert(rect.width); //200
alert(rect.height); //205 (in safari), 204.5 in other browsers
var svg = document.getElementById('s');
var rect = svg.getBBox();
alert(rect.width); //200
alert(rect.height); //200
我正在尝试获取父 div 的宽度和高度。无论出于何种原因，getBoudingClientRect 给了我一个不正确的高度值（205 或 204.5）宽度是正确的，但高度是关闭的。有什么想法吗？
http://jsfiddle.net/jTvaF/5/
【问题讨论】：
高度正确，204.5像素高。 There is a 4px gap below canvas/video/audio elements in html5的可能重复 @Stijn 是正确的，<svg> 元素是内联的，如果你把它做成一个块，底部多余的空间就会消失。见jsfiddle.net/jTvaF/6
谢谢，这就是问题所在。
【参考方案1】：
给 svg 属性 display:block;它应该开始正确输出。
【讨论】：
以上是关于getBoundingClientRect，内联 SVG 的高度值不正确的主要内容，如果未能解决你的问题，请参考以下文章
[转] getBoundingClientRect判断元素是否可见
Element.getBoundingClientRect()