忽略 SVG 纵横比并拉伸到 100% window 大小

Question

我有一个 svg 文件用作 background-image。现在我想将它拉伸到 window 的大小。 应忽略所有宽高比，因此背景 SVG 不应使用 background-size: cover 或 contain。

现在我有这段代码，但它不起作用。

html {
  background: url("image.svg") center no-repeat;
  width: 100%;
  height: 100%;
}

有人知道吗？

Answer 1

如果您不关心宽高比，只需将 preserveAspectRatio="none" 添加到 SVG。并在CSS.

中设置background-size: 100% 100%;

示例：

html {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z'%3E%3C/path%3E%3C/svg%3E") center / 100% 100% no-repeat;
  height: 100%;
}

忽略 SVG 纵横比并拉伸到 100% window 大小

Ignore SVG aspect ratio and stretch to 100% window size

html

css

svg

background-image