3

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

我做了一个小提琴。

在 Google Chrome 30.0.1599.101Before SVG和 SVG 之间以及 SVG 和After SVG. 在 Firefox 24 和 IE 11 中没有垂直间隙。

是否可以消除铬中的这些间隙？我希望 和svg一样大g。

4

3 回答 3

1

奇怪的行为。。

height似乎延伸到因此100%通过扩展viewBox. 通过设置width:100%, 并且height:0%此行为被覆盖。

jsFiddle 这里- 似乎在 Chrome/FF/IE 中工作

此外，p还有一个默认的margin. 将那些重置为0px.

注意：在上面的示例中 - 我调整了 的cy值circles以消除所有间隙。这是一个没有那个的例子。jsFiddle 这里- 仍然有一点差距，但是，它与以前相去甚远。

于 2013-10-21T18:11:46.877 回答
0

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

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

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

于 2013-10-21T17:41:32.410 回答
0

您尚未指定宽度和高度。所以 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/

于 2013-10-22T06:02:54.760 回答