通过在 svg 标签中显式声明 width 和 height 属性，并配合 css 的 background-size: 100% 100%，可强制 svg 背景无比例拉伸以完全覆盖容器，解决因矢量图缺乏固有尺寸导致的缩放不一致问题。
通过在 svg 标签中显式声明 width 和 height 属性，并配合 css 的 background-size: 100% 100%，可强制 svg 背景无比例拉伸以完全覆盖容器，解决因矢量图缺乏固有尺寸导致的缩放不一致问题。
在 CSS 中将 SVG 用作 background-image 时，即使设置了 background-size: 100% 100% 和 SVG 内的 preserveAspectRatio="none"，许多浏览器（尤其是 Chrome 和 Safari）仍可能无法按预期拉伸——这是因为 SVG 作为矢量格式，默认没有固有尺寸（intrinsic dimensions）。根据 MDN 文档，浏览器对无尺寸矢量背景的 background-size 支持尚未完全统一，容易出现留白、居中或仅水平/垂直拉伸等异常行为。
✅ 正确做法是：为 SVG 源文件（即 base64 或内联 SVG 字符串中的 ，使其具备明确的固有尺寸。
例如，若你的 SVG 原始 viewBox 是 "0 0 1200 638"，应在
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1200 638" preserveaspectratio="none" width="1200" height="638"><!-- path, rect 等内容 --></svg>
⚠️ 注意：
- width/height 值建议与 viewBox 的宽高数值一致（如本例 1200 × 638），确保坐标系映射准确；
- 若使用 base64 编码的 SVG，需解码后编辑
- preserveAspectRatio="none" 仍需保留，它确保 SVG 内容在拉伸时不会维持原始比例；
- CSS 中保持 background-size: 100% 100%（或简写为 cover 不适用，因其会保持宽高比），并推荐加上 background-repeat: no-repeat。
✅ 最终 CSS 示例：
.container {
background-image: url("data:image/svg+xml,%3Csvg...%3C%2Fsvg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
? 总结：SVG 作为背景图能否可靠拉伸，关键不在 CSS 单方面控制，而在于 SVG 源是否携带明确的固有尺寸。添加 width/height 是跨浏览器兼容的必备步骤，也是 W3C 渲染规范所依赖的基础条件。
