为什么我的 SVG 背景文件无法放大？

Question

我的问题是浏览器不听background-size。我什至尝试在 SVG 中将 preserveAspectRatio 设置为 none，但它仍然不起作用。

它不应随纵横比调整大小。伸个懒腰就好了..

SVG 文件

为了在我的示例中使用背景图片，我使用了 data:image。如果你想知道 SVG 文件长什么样，就在下面：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <path d="M 10 10 C 20 20, 40 20, 50 10" fill="000"/>
</svg>

例子

我期望的是黑色 "banana" 将尺寸更改为更大的尺寸。我将它设置为 100px，因此它应该一直延伸到 div.

的末尾

div {
  height: 100px;
  width: 100px;
  background: #eee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' fill='000'/%3E%3C/svg%3E");
  background-position: center 0;
  background-size: 100px 100px;
  background-repeat: no-repeat;
 }

<div></div>

Answer 1

需要一个视图框。感谢@enxaneta。

viewBox='10 10 40 7.5'

为什么我的 SVG 背景文件无法放大？

Why will my SVG background file not scale up?

size

svg

background

例子