1

There are quite a few questions on how to size or scale SVG elements within a page already, but none of them addressed sizing an SVG so it fills exactly the remaining available space within its parent - a <div> with id="content" which already contains some paragraphs (or other elements).

Target platforms include desktop browsers and mobile apps (using Cordova in case that matters).

I am using D3.js for drawing the SVG contents, so I don't want to use the SVG viewBox attribute (which is explained nicely in this answer) because that would also scale stroke widths which I'd like to have under direct CSS/JavaScript control.

Here is what I have so far: http://codepen.io/friendfx/pen/OMxYrL

This works quite well across modern desktop browsers but has the following problems:

  1. When reducing the window size such that the SVG element should become smaller than 300px in width or 150px in height (which I nowhere specified but which seems to be some sort of "default SVG size"), the layout starts to fall apart in Chrome and IE and (to a lesser extent Firefox which seems to have only problems with the 150px height).
  2. IE doesn't want to wrap the first (long) paragraph as long as the body's flex-direction is row.
  3. On Android the height of the SVG element seems to always equal the WebView's height, irrespective of the vertical space taken up by the two <p> elements before the <svg>.

While I could potentially ignore issues 1 and 2, the 3rd one is a killer as I don't want any scrolling whatsoever.

After reading the SVG Specification on intrinsic sizing, I am wondering whether the WebView's behaviour is actually closest to the spec since it makes the SVG (at least vertically) grow to the SVG viewport's size (which I believe to be the size of the WebView/browser window).

Is there a reasonably clean way to solve (at least) issue 3?

By the way, here is a fork of the above code where I just replaced the <svg> element with a <p> and which works beautifully across all browsers and the Android WebView.

Community
  • 1
  • 1
FriendFX
  • 2,929
  • 1
  • 34
  • 63
  • is this what you're after? http://codepen.io/Mi_Creativity/pen/OMxKMx – Mi-Creativity Jan 18 '16 at 03:22
  • 1
    Yup seems I've override your pen, sorry for that, basically I added this `width:100%;` to the `svg` css, because it was glitchy when I resize the window horizontally or vertically – Mi-Creativity Jan 18 '16 at 03:38
  • @Mi-Creativity: Ah, I see the difference - now I got your code. While the behaviour has improved slightly in Chrome, unfortunately it behaves exactly the same on Android - the SVG's height is bigger than the available space in `#content`, leading to vertical scrolling. – FriendFX Jan 18 '16 at 03:51
  • 1
    of course [300 x 150 is specified](https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width), we don't just make stuff up you know! – Robert Longson Jan 18 '16 at 07:58
  • @RobertLongson: Interesting read, thanks. I wish it was written as code instead - I think it would be easier to understand. Also I am not quite sure which part of that specification applies to my case? – FriendFX Jan 18 '16 at 22:48

1 Answers1

3

Through trial and error and following Mi-Creativity's comment of using width: 100%, I styled my SVG element as follows:

svg {
  border: 1px solid #0E0;
  flex-grow: 1;
  width: 100%;
  height: 100%;
}

Here is the complete example on Codepen: https://codepen.io/friendfx/pen/RrjpeL

The SVG element still doesn't shrink below its mysterious minimum size constraints of 300px * 150px, but I can live with that for now.

FriendFX
  • 2,929
  • 1
  • 34
  • 63