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中，Before SVG与SVG之间以及SVG与After SVG之间存在较大的垂直间隙/空格。在Firefox 24和IE 11中没有垂直间隙。

是否有可能消除铬中的这些空隙？我希望svg与g一样大。

Answer 1

奇怪的行为..

height似乎延伸到100%因此通过扩展viewBox的垂直对齐来创建此垂直间隙。通过设置width:100%和height:0%，此行为将被覆盖。

jsFiddle here - 似乎可以在Chrome / FF / IE中使用

此外，p还有一个默认margin。将这些重置为0px。

注意：在上面的例子中 - 我调整了cy的{{1}}值，以消除所有差距。这是一个没有它的例子。 jsFiddle here - 仍有一点差距，但是，它远不及以前的那样。

Answer 2

我刚刚更改了miny值，似乎已经消除了差距：

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

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

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>

虽然在20pxx7px，但有点难以看到。我假设你的意思是“svg和g一样大”。

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

SVG和DOM之间的垂直差距

3 个答案: