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

时间:2013-09-27 22:09:42

标签: javascript html html5 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/

1 个答案:

答案 0 :(得分:4)

给svg提供display:block;它应该开始正确输出。