2013-09-27 28 views
6
<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)을 제공합니다. 너비는 정확하지만 높이는 꺼져 있습니다. 어떤 아이디어?getBoundingClientRect, 인라인 SVG의 잘못된 높이 값

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

+0

높이가 정확하고 높이가 204.5 픽셀입니다. – Stijn

+0

200px – user2800679

+3

가능한 복제본 [HTML5에 캔버스/비디오/오디오 요소 아래에 4px 갭이 있습니다] (http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below- canvas-video-audio-elements-in-html5) – Stijn

답변

3

SVG에게 디스플레이 속성 보내기 블록; 제대로 출력되기 시작해야합니다.