svg의 높이와 컨테이너의 높이를 설정하는 방법

Question

svg로 웨이브를 만들었습니다. 이 웨이브는 컨테이너에 있습니다. 어떻게 svg 웨이브의 높이와 svg 인 컨테이너의 높이를 설정할 수 있습니까?

<div class="container"> 
<h1 class="innertext"> 
Lorem Ipsum Dolor Sit 
</h1> 
<svg class="one" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"> 
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#05aed9;"></path> 
</svg> 

<svg class="two" viewBox="0 0 500 500" preserveAspectRatio="yMinYMin meet"> 
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#1e90ff;"></path> 
</svg> 


<svg class= "three" viewBox="0 0 500 500" preserveAspectRatio="yMinYMin meet"> 
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#004681;"></path> 
</svg> 

</div> 

는 그리고이 스타일은 내가 사용된다

svg { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
svg.one { 
    margin-top: 40px; 
} 
svg.two { 
    margin-top: 20px; 
    z-index: 1; 
} 
svg.three { 
    margin-top: 0px; 
    z-index: 2; 
} 
.container { 
    height: 800px; 
} 

.innertext { 
    position: absolute; 
    z-index: 3; 
    left: 0; 
    top: 0; 
    color: #ffffff; 
} 

어떻게 내가 위의이 같은 그림을 달성 할 수있다?

Answer 1

SVG에서 AspectRatio를 기반으로 할 수있는 모든 공간을 차지하도록 높이를 설정하지 않았습니다.

높이와 너비를 지정해야하며 preserveAspectRatio을 none으로 설정해야합니다.

svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 

 
svg.one { 
 
    margin-top: 10px; 
 
} 
 

 
svg.two { 
 
    margin-top: 20px; 
 
    z-index: 1; 
 
} 
 

 
svg.three { 
 
    margin-top: 0px; 
 
    z-index: 2; 
 
} 
 

 
.container { 
 
    height: 800px; 
 
} 
 

 
.innertext { 
 
    position: absolute; 
 
    z-index: 3; 
 
    left: 0; 
 
    top: 0; 
 
    color: #ffffff; 
 
}

<div class="container"> 
 
    <h1 class="innertext"> 
 
    Lorem Ipsum Dolor Sit 
 
    </h1> 
 
    <svg class="one" viewBox="0 0 500 500" preserveAspectRatio="none"> 
 
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#05aed9;"></path> 
 
</svg> 
 

 
    <svg class="two" viewBox="0 0 500 500" preserveAspectRatio="none"> 
 
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#1e90ff;"></path> 
 
</svg> 
 

 

 
    <svg class="three" viewBox="0 0 500 500" preserveAspectRatio="none"> 
 
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#004681;"></path> 
 
</svg> 
 

 
</div>