Why does an svg element not respect CSS 'bottom', 'top', 'left', 'right' properties?

Question

I sometimes find it convenient to give the size of an element in terms of the bottom, top, left and right properties, rather than using width and height. This is, for example, the accepted answer here:

CSS 100% height with padding/margin

However, for some reason this doesn't work with an svg element. I've tried the following example with the latest stable Firefox and Chrome. The svg element inexplicably wants to take a size of 300x150:

Fiddle

Why?

Answer 1

While it's not mentioned directly in the spec (at least in my knowledge)<svg> is considered as a replaced element (unlike <div> which is a non-replaced block level element).

For absolutely positioned replaced elements, if the values of top/bottom are over-constrained, once you set a value for top, bottom would be ignored. This is true for left/right properties as well.

10.3 Calculating widths and margins / 10.3.8 Absolutely positioned, replaced elements

6. If at this point the values are over-constrained, ignore the value for either 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.

10.6 Calculating heights and margins / 10.6.5 Absolutely positioned, replaced elements

6. If at this point the values are over-constrained, ignore the value for 'bottom' and solve for that value.

Hence the absolutely positioned <svg> element would be position with the respect to top and left offsets.