왜 배경 크기 : 100 % 100 %; 이 SVG에서 작동하지 않습니까? 이 예에서

Question

봐 :

.container { 
 
    background-image:url("http://svgshare.com/i/3cM.svg"); 
 
    background-position:center center; 
 
    background-repeat:no-repeat; 
 
    width:400px; 
 
    height:200px; 
 
    background-color:#eef; 
 
    border-bottom:1px solid #000; 
 
    background-size:100% 100%; 
 
}

<div id="container1" class="container"></div>

관련 질문 : Stretch a background image (SVG) to 100% width and 100% height? 주석의 제안으로

Answer 1

은 .svg 파일을 열고 SVG 태그 안에

preserveAspectRatio="none"

을 설정합니다.

Answer 2

가, 또 다른 하나의 내부 SVG 컨테이너를 포장하고 래퍼에게 당신이 필요로하는 크기를 제공합니다. 이 경우 래퍼를 100vw 너비 및 100vh 높이로 설정합니다. 래퍼 크기를 변경하고 svg가 이어지는 것을 확인하십시오.

html, body { 
 
    padding:0; 
 
    margin:0; 
 
} 
 

 
.wrapper { 
 
    width:100vw; 
 
    height:100vh; 
 
} 
 

 
.container { 
 
    background-image:url("http://svgshare.com/i/3cM.svg"); 
 
    background-position:center center; 
 
    background-repeat:no-repeat; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#eef; 
 
    border-bottom:1px solid #000; 
 
    background-size:100% 100%; 
 
}

<div class="wrapper"> 
 
    <div id="container1" class="container"></div> 
 
</div>