Why doesn't the svg element support CSS "bottom", "top", "left", "right" properties?
Sometimes it is convenient to specify the size of the element in terms of properties bottom
, top
, left
and right
, instead of using width
and height
. This is for example the accepted answer here:
CSS height 100% with padding / markup
However, for some reason this doesn't work with the element svg
. I've tried the following example with the latest stable Firefox and Chrome. The element svg
inexplicably wants to take the size 300x150:
Why?
source to share
Until it is mentioned directly in the spec (at least as far as I know) it is <svg>
seen as replacing an element (as opposed to <div>
which is an element without a block element).
For absolutely positioned, replaced elements if the value top
/ bottom
extremely limited, as soon as you set it to top
, bottom
will be ignored. The same is true for properties left
/ right
.
10.3 Calculating Width and Margins / 10.3.8 Absolutely Positioned, Replaced Elements
- If at this point the values ββare overridden, ignore the value for "left" (in case the "direction" property for the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for this value.
10.6 Calculation of heights and margins / 10.6.5 Absolutely positioned, replaced elements
- If at this point the values ββare overloaded, ignore the value for "below" and decide for that value.
Therefore, an absolutely positioned element <svg>
will have a position relative to the offsets top
and left
.
source to share