+ 1
Why height of SVG is not setting to 50%
6 Respuestas
+ 2
Any element has always a parent element. The only 'element' wich has no parent is the root documeny element (<html>)... In your case, <body> is the parent of your <svg> ;)
Since <body> (or any block level element with default behavior unchanged) has no explicit height setted, it will have an auto-height regarding the needs of its content (even if background property apply to the entire viewport ^^). So 50% of <svg> parent could no be computed and svg height belong to its default value ;)
You could force the body to have explicit height, by adding this to your css:
html { height:100%; }
body { height:100%; margin:0; }
the html height is required to have a root explicit height to apply descendant percentages, zero margin (and padding, at least both at top and bottom -- but padding default to zero) for body is required to avoid total height (body height+margin+padding) being more than the viewport (display) height...
+ 3
Because its relative to its parent element.
0
How
0
I have not used svg in any parent element. And body tag defines the content to be showed in browser, then how can this affect svg???
Please describe answer
0
Try this in a web browser.
https://code.sololearn.com/WSwg9VWW9P9q/?ref=app
0
Thanks visph for eleborating so much clearly☺️.