Question:
There is such a svg in the code against the background, and it stretches to the entire page as expected, but the path inside it for some reason does not fill the entire screen:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.bg {
width: 100%;
height: 100%;
}
.bg svg {
width: 100%;
height: 100%;
}<div class="bg">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 330">
<path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/>
</svg>
</div>How do I make the path inside svg the full width and height of the screen?
Answer:
To understand where the svg borders are, add a border to the header of the svg file
style="border:1px solid red;" After adjusting the proportions and sizes, this red frame will not be needed, erase it.
To make the svg take up the entire container space, add inside the svg file width="100%" , height="100%" and the command preserveAspectRatio="none"
<style>
html,
body {
width: 100%;
height: 100%;
}
</style>
<div class="bg">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 330" preserveAspectRatio="none" style="border:1px solid red;" >
<path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/>
</svg>
</div>