如何使SVG作为容器background-image时完全拉伸适配容器？

针对你的需求，只需对现有代码做两处关键修改即可实现SVG完全拉伸覆盖容器、边缘对齐的效果：

1. 修正SVG的viewBox属性拼写
   你当前使用的viewbox是全小写格式，但SVG属性区分大小写，正确写法应为viewBox（首字母大写）。同时确保preserveAspectRatio="none"正确添加到SVG根元素上，示例代码如下：

   <svg viewBox="0 0 1200 638" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
     <!-- 你的SVG图形内容 -->
   </svg>
   

2. 完善容器的CSS背景设置
   为容器元素设置明确的尺寸（比如占满视口），保留background-size: 100% 100%;的同时，补充background-repeat: no-repeat;防止SVG重复填充，示例CSS：

   .container {
     width: 100vw;
     height: 100vh;
     background-image: url('你的SVG文件路径');
     background-size: 100% 100%;
     background-repeat: no-repeat;
   }
   

逻辑说明 #

• viewBox定义了SVG的坐标系统范围，正确拼写后才能配合preserveAspectRatio="none"取消宽高比锁定，允许SVG自由拉伸变形。
• background-size: 100% 100%;强制背景图的宽高完全匹配容器的宽高，确保边缘对齐；background-repeat: no-repeat避免SVG重复填充容器空间。

内容的提问来源于stack exchange，提问作者Ricevind