Reputation: 24500
I have an SVG embedded inside HTML like this:
<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>
I have made a fiddle of it.
In Google Chrome 30.0.1599.101 there is a big vertical gap / space between Before SVG
and the SVG and between the SVG and After SVG
. In Firefox 24 and IE 11 there is no vertical gap.
Is it possible to remove those gaps in chrome? I want the svg
to be as big as the g
.
Upvotes: 3
Views: 735
Reputation: 101966
You haven't specified a width and height. So the SVG is defaulting to width="100%"
height="100%"
. Just add a width and height, like so:
<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>
Although at 20pxx7px it's a bit hard to see. I'm assuming that's what you meant by "svg as big as the g".
Demo: http://jsfiddle.net/AG7xf/3/
Upvotes: 0
Reputation: 241278
Weird behavior..
The height
seems to stretch to 100%
therefore creating this vertical gap by extending the vertical alignment of the viewBox
. By setting width:100%
, and height:0%
this behavior is overwritten.
jsFiddle here - appears to work in Chrome/FF/IE
Additionally, the p
has a default margin
. Reset those to 0px
.
Note: In the above example - I tweaked the cy
values of the circles
in order to eliminate all the gaps. Here is an example without that. jsFiddle here - there is still a slight gap, however, it is nowhere near what it was before.
Upvotes: 1
Reputation: 3663
I just changed the miny value, and it seems to have removed the gap:
<svg viewBox="-1 4 19 6">
Upvotes: 0