为何SVG背景图无法按设置缩放？已尝试preserveAspectRatio仍无效

我来帮你搞定这个问题！你遇到的核心问题是SVG本身没有指定明确的视口尺寸，浏览器会默认使用300px×150px的视口来渲染它，即便你加了preserveAspectRatio="none"，也没法让内部图形铺满你设置的100px×100px背景区域。

关键修复步骤 #

• 给SVG添加width="100%"和height="100%"，让它能完全继承背景容器的尺寸
• 保留preserveAspectRatio="none"，确保SVG允许被拉伸而不保持原比例
• 修正SVG中的颜色值写法，同时确保data URI里的特殊字符转义正确

修正后的完整代码 #

<style>
div {
  height: 100px;
  width: 100px;
  background: #eee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' preserveAspectRatio='none'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' fill='%23000'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 100px 100px;
  background-repeat: no-repeat;
}
</style>
<div></div>

额外说明 #

• 我把fill="000"改成了fill="%23000"（转义后的#000），这样黑色才能正确生效，之前的写法会被浏览器识别为无效颜色值
• SVG的width和height设为百分比后，会自动适配background-size设置的尺寸，配合preserveAspectRatio="none"就能实现完全拉伸铺满容器
• 如果后续需要适配不同尺寸的容器，把background-size改成100% 100%会更灵活

内容的提问来源于stack exchange，提问作者Jens Törnell