SVG和DOM之间的垂直间隙

Question

我有一个嵌入在HTML中的SVG，就像这样：

<p>Before SVG</p>
<svg viewBox="-1 -1 19 6">
    <g>
        <circle cx="0" cy="0" r="0.4"></circle>
        <circle cx="17" cy="0" r="0.4"></circle>
        <circle cx="0" cy="4" r="0.4"></circle>
        <circle cx="17" cy="4" r="0.4"></circle>
    </g>
</svg>
<p>After SVG</p>

我已经制作了一个fiddle。

在Google Chrome 30.0.1599.101中，SVG之前、SVG和After SVG之间有很大的垂直间隙/空间。在Firefox 24和IE 11中，没有垂直间隙。

是否可能在Chrome中删除这些间隙？我希望SVG与g一样大。

- Endy Tjahjono

Answer 1

奇怪的行为...

似乎 height 会拉伸到 100%，从而通过扩展 viewBox 的垂直对齐方式来创建这个垂直间隙。通过设置 width:100% 和 height:0%，可以覆盖此行为。 jsFiddle here - 在Chrome/FF/IE中似乎有效。

另外，p 具有默认的 margin。将其重置为 0px。

注意：在上面的示例中，我调整了 circles 的 cy 值，以消除所有间隙。这是一个没有进行调整的示例。jsFiddle here - 仍然存在轻微的间隙，但是远远不及之前的那么大。

- Josh Crozier

Answer 2

我刚刚改变了miny值，似乎已经去掉了间隙：

<svg viewBox="-1 4 19 6">

http://jsfiddle.net/AG7xf/1/

- mavrosxristoforos

---

它还会在特定的视口处裁剪 svg。 - Josh Crozier

你用的是什么浏览器？我在你的fiddle中仍然看到了间隙。 - Endy Tjahjono

我在Chrome 30.0.1599.101 m中进行了测试。 - mavrosxristoforos

Answer 3

您没有指定宽度和高度。因此，SVG 默认为 width="100%" height="100%"。只需添加宽度和高度即可，如下所示：

<svg viewBox="-1 -1 19 6" width="20px" height="7px">
    <g>
        <circle cx="0" cy="0" r="0.4"></circle>
        <circle cx="17" cy="0" r="0.4"></circle>
        <circle cx="0" cy="4" r="0.4"></circle>
        <circle cx="17" cy="4" r="0.4"></circle>
    </g>
</svg>

虽然在20px x 7px的大小下有点难以看清。我猜这就是你所说的“svg和g一样大”的意思。

演示：http://jsfiddle.net/AG7xf/3/

- Paul LeBeau