为什么我的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>

示例

我期望黑色的“香蕉”将尺寸更改为更大的尺寸。我将其设置为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'