SVG球在webkit瀏覽器中導致額外的空間

Question

我是svg的新手，並嘗試使用svg創建一些球。

<style> 
.container{ 
    width:420px; 
    margin:0 auto; 
} 
.div1 { 
    float:left; 
    width:200px; 
} 
.div2 { 
    float:left; 
    margin-left:20px; 
    width:200px; 
} 
</style> 


<div class="container"> 
    <div class="div1"> 
     This is description, image or anything 
    </div> 

    <div class="div2">  
     <svg xmlns="http://www.w3.org/2000/svg"> 
      <circle cx="30" cy="30" r="15" fill="#df6c4f" /> 
      <circle cx="60" cy="30" r="15" fill="#ecd06f" /> 
      <circle cx="90" cy="30" r="15" fill="#409f89" /> 
      <circle cx="120" cy="30" r="15" fill="#1a99aa" /> 
     </svg> 
    </div> 

    <div class="div1"> 
     This is description, image or anything 
    </div> 

    <div class="div2">  
     <svg xmlns="http://www.w3.org/2000/svg"> 
      <circle cx="30" cy="30" r="15" fill="#df6c4f" /> 
      <circle cx="60" cy="30" r="15" fill="#ecd06f" /> 
      <circle cx="90" cy="30" r="15" fill="#409f89" /> 
      <circle cx="120" cy="30" r="15" fill="#1a99aa" /> 
     </svg> 
    </div> 
</div> 

但在WebKit瀏覽器，我可以看到div1和div2之間的額外空間。我怎樣才能刪除它？ TEST

Answer 1

刪除DIV1的寬度和DIV2的左旁會有沒有空間：http://jsfiddle.net/4rpy5/1/

如果你想球碰DIV1的邊緣，更改其偏移以匹配半徑：http://jsfiddle.net/4rpy5/2/

<circle cx="15" cy="15" r="15" fill="#df6c4f" />