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:




source to share

1 answer

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

  1. 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

  1. 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




All Articles