为什么 background-size: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>

相关问题：

Answer 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>

Answer 2

打开您的 .svg 文件并设置

preserveAspectRatio="none"

在 SVG 标签内。

为什么 background-size:100% 100%;不适用于此 SVG？

Why does background-size:100% 100%; not work on this SVG?

html

css

svg

background-image

stretch