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