なぜ背景サイズ：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

は、別の1内の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>