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.101 ではBefore SVG、 と SVG の間、および SVG とAfter SVG. Firefox 24 および IE 11 では、縦方向のギャップはありません。

クロムのこれらのギャップを取り除くことは可能ですか? svgをと同じくらい大きくしたいg。

4

3 に答える 3

1

挙動不審..

はheight伸びているように見えるため100%、 の垂直方向の位置合わせを拡張することで、この垂直方向のギャップを作成しますviewBox。を設定するwidth:100%と、height:0%この動作は上書きされます。

jsFiddle here - Chrome/FF/IE で動作するよう

さらに、 にpはデフォルトがありますmargin。それらを にリセットし0pxます。

注: 上記の例では、すべてのギャップをなくすためにのcy値を微調整しました。circlesこれがない例です。ここに jsFiddle - まだわずかなギャップがありますが、以前の状態にはほど遠いものです。

于 2013-10-21T18:11:46.877 に答える