忽略 SVG 纵横比并拉伸至 100% 窗口大小

Question

我有一个 svg 文件，正在用作background-image. 现在我想将其拉伸到窗口的大小。所有长宽比都应被忽略，因此背景 SVG 不应使用background-size: coverNor contain。

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

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

有人有什么想法吗？

Answer 1

preserveAspectRatio="none"如果您不关心宽高比，则可以简单地添加到 SVG。并background-size: 100% 100%;在CSS中设置。

例子：

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%;
}