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

  • The height is correct, it is 204.5 pixels high. – user247702 Sep 27 '13 at 22:16
  • 3
    possible duplicate of [There is a 4px gap below canvas/video/audio elements in HTML5](http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below-canvas-video-audio-elements-in-html5) – user247702 Sep 27 '13 at 22:24
  • 1
    @Stijn Is correct, the `` element is inline, and the extra space at the bottom will go away if you make it a block. See http://jsfiddle.net/jTvaF/6/ – bfavaretto Sep 27 '13 at 22:34
  • Thanks, that was the issue. –  Oct 01 '13 at 23:08

1 Answers1

3

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

geekster777
  • 297
  • 1
  • 5