title: Why does an svg element not respect CSS 'bottom', 'top', 'left', 'right' properties?
body: <p>I sometimes find it convenient to give the size of an element in terms of the <code>bottom</code>, <code>top</code>, <code>left</code> and <code>right</code> properties, rather than using <code>width</code> and <code>height</code>. This is, for example, the accepted answer here:</p>
  
  <p><a href="https://stackoverflow.com/questions/485827/css-100-height-with-padding-margin/485887">CSS 100% height with padding/margin</a></p>
  
  <p>However, for some reason this doesn't work with an <code>svg</code> element. I've tried the following example with the latest stable Firefox and Chrome. The <code>svg</code> element inexplicably wants to take a size of 300x150:</p>
  
  <p><a href="http://jsfiddle.net/Rpdr9/1928/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>Why?</p>