Html SVG ball在webkit浏览器中造成额外空间

我是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>

.集装箱{
宽度：420px；
保证金：0自动；
}
.1分部{
浮动：左；
宽度：200px；
}
.第2分部{
浮动：左；
左边距：20px；
宽度：200px；
}
这是描述、图像或任何东西
这是描述、图像或任何东西

但是在webkit浏览器中，我可以看到

div1

和

div2

之间有额外的空间。我怎样才能删除它？

---

删除div1的宽度和div2的左边距，将没有空间：

如果希望球接触div1的边缘，请更改其偏移以匹配半径：

有什么额外的空间问题？删除宽度和左边距：请查看图片。在chrome中，你可以看到

div1

和

div2

之间的边距比在Mozilla中高得多。在我看来，它们看起来完全一样。这可能是因为浏览器呈现字体的方式不同，所以看起来边距不同，但实际的div是相同的。试着在它们上面加上边框，你就会看到。在chrome中，球的高度

div2

要大得多。不过，给

div2

赋予一个高度会使它们相等

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