CODEWITHSUNDEEP
javascripthtmlsvggetboundingclientrect
user2800679
user2800679

Reputation:

getBoundingClientRect, incorrect height value for inline SVG

<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?

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

Upvotes: 7

Views: 5844

Answers (1)

geekster777
geekster777

Reputation: 297

Give the svg the property of display:block; and it should start outputting correctly.

Upvotes: 3

Related Questions