javascript - getBoundingClientRect,内联 SVG 的高度值不正确

标签 javascript html svg getboundingclientrect

<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

我正在尝试获取父 div 的宽度和高度。无论出于何种原因,getBoudingClientRect 都给我一个不正确的高度值(205 或 204.5)宽度正确,但高度不正确。有什么想法吗?

http://jsfiddle.net/jTvaF/5/

最佳答案

赋予svg属性display:block;它应该开始正确输出。

关于javascript - getBoundingClientRect,内联 SVG 的高度值不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19060880/

相关文章:

javascript - 在新选项卡(而不是新窗口)中打开 URL

JavaScript/JQuery 函数不返回任何内容

javascript - jQuery 插件不适用于所有应用的元素

html - 使用 jQuery 显示 XML 文件中的数据

java - 在 Tomcat 上的 Web 应用程序中使用 Batik 时出现 "SAX2 driver class org.apache.crimson.parser.XMLReaderImpl not found"

javascript - JS/CSS 库根据指针位置设置动画背景

html - 使用 float 更改两个 DIV 的顺序 - IE 错误

javascript - 我想在 jquery 中获取背景图片 url。我如何替换()此代码?

javascript - IE8 内联尝试的 SVG 后备

css - svg 图形不适合