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

Ebeveyn divunun genişliğini ve yüksekliğini elde etmeye çalışıyorum. Hangi nedenle olursa olsun, getBoudingClientRect bana yanlış bir yükseklik değeri veriyor (205 veya 204.5) Genişlik doğru, ancak yükseklik kapalı. Herhangi bir fikir?getBoundingClientRect, satır içi SVG için yanlış yükseklik değeri

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

+0

Yükseklik doğru, 204.5 piksel yüksekliğinde. – Stijn

+0

, 200px – user2800679

+3

olması muhtemel olası olmalıdır [HTML5'te tuval/video/ses öğelerinin altında 4px boşluk var] (http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below- canvas-video-audio-elements-in-html5) – Stijn

cevap

3

SVG ekranın özelliği verin: block; ve doğru şekilde çıkış yapmaya başlamalıdır.

İlgili konular