Menu
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?
989
There are many Scalable Vector Graphics (SVG), but only certain attributes can be applied as CSS to SVG. Presentation attributes are used to style SVG elements and can be used as CSS properties. Some of these attributes are SVG-only while others are already shared in CSS, such as font-size or opacity .
Absolute PositioningMove Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.
Padding on an svg element actually widens the canvas upon which svg shapes can be visible. For instance, if you have an element that is on the edge of an SVG canvas, then you can add padding that will make that shape not cut off. Whereas margin will just affect the right/left positioning of the svg element.
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
- 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
- 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.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
