{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我只想做你的唯一 的问题《getBoundingClientRect, incorrect height value for》','https://www.manongdao.com/q-774218.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
<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" width="200px" height="200px">
<rect width="200px" height="200px" 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
I'm trying to get the width and height of the parent div. For whatever reason, getBoudingClientRect is giving me an incorrect height value (205 or 204.5) The width is correct, but the height is off. Any ideas?
Give the svg the property of display:block; and it should start outputting correctly.