Svg viewbox and preserveAspectRatio is not doing like expected

Question

I am viewing the following svg http://pastebin.com/pNdNEQ6z in my Firefox and chome.

Can someone tell me why the two graphs are somewhere in der middle of y an not starting at the top? If you change the viewbox to "0 200 650 800" everything is fine. why 200? I have played with preserveAspectRatio="xMidYMin" but this is not doing anything.

At the end of the day I want to display both charts completely visible starting at the top? And I would like to understand why it is not doing so right now :-)

Answer 1

Your problem is that you had a typo on your first embedded <svg> element (you had hight="400" instead of height="400") and were not using a …YMin alignment on the outer.

Fixed, it looks like this:

<svg … preserveAspectRatio="xMidYMin">
  <svg … height="400">

Demo: http://jsfiddle.net/WAVZj/