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" />