2013-09-27 13 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 

Sto cercando di ottenere la larghezza e l'altezza del div genitore. Per qualsiasi motivo, getBoudingClientRect mi fornisce un valore di altezza non corretto (205 o 204.5). La larghezza è corretta, ma l'altezza è disattivata. Qualche idea?getBoundingClientRect, valore di altezza errato per in linea SVG

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

+0

L'altezza è corretta, è alta 204,5 pixel. – Stijn

+0

dovrebbe essere 200px – user2800679

+3

possibile duplicato di [C'è un gap 4px sotto elementi di tela/video/audio in HTML5] (http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below- audio-elementi-in-HTML5 canvas-video-) – Stijn

risposta

3

Dare al svg di proprietà del display: block; e dovrebbe iniziare l'uscita correttamente.