如何将Base64编码的SVG作为CSS background-image正常显示？

我来帮你排查这个问题——你遇到的SVG作为背景图不显示、Firefox里尺寸为0x0的情况，核心原因出在SVG本身的坐标和viewBox不匹配上，咱们一步步解决：

核心问题分析 #

看你提供的SVG代码：

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 141 19'>
  <path d='M366-589c-6 1-11 5-16 9-6 7-10 16-10 26 0 20-15 36-34 36h-411c-9 0-18-4-24-10-7-7-10-16-10-26 0-17-12-31-27-35h532z' fill='rgba(255,255,255,0.7)'/>
</svg>

你的viewBox定义了一个141x19的可视区域，但path的起始坐标是M366-589，后续路径的范围也完全超出了这个viewBox。浏览器会认为viewBox内没有任何可见内容，自然渲染出一个0x0的空SVG，这就是背景图不显示的根本原因。

具体修复步骤 #

1. 调整SVG的坐标或viewBox #

有两种方式让路径落在可视区域内：

• 方式一：修改viewBox匹配路径范围
  计算你的path实际覆盖的坐标范围：x从-72（366-411-27）到366，y从-589到-553（-589+36）。把viewBox改成-72 -589 438 36（宽=366-(-72)=438，高=-553-(-589)=36），就能完整显示路径。

• 方式二：平移路径坐标到viewBox内
  把所有path的x坐标减去366，y坐标加上589，让起始点变成M0 0，这样路径就落在0 0 141 19的viewBox里了（需要微调确保路径完全适配）。

2. 正确处理SVG编码（区分URL编码和Base64） #

你当前代码用的是URL编码的SVG字符串（不是Base64），这本身是可行的，但要确保编码正确。如果要使用Base64，需将调整后的完整SVG文本转成Base64格式，再写入background-image。

修复后的示例代码 #

版本一：调整viewBox的URL编码SVG #

.borderCurve {
  position: absolute;
  bottom: -20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-72 -589 438 36'%3E%3Cpath d='M366-589c-6 1-11 5-16 9-6 7-10 16-10 26 0 20-15 36-34 36h-411c-9 0-18-4-24-10-7-7-10-16-10-26 0-17-12-31-27-35h532z' fill='rgba(255,255,255,0.7)'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  width: 158px;
  height: 20px;
  opacity: 0.7;
}

版本二：Base64编码的调整后SVG #

先将调整后的SVG文本转成Base64，再替换到代码中：

.borderCurve {
  position: absolute;
  bottom: -20px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy03MiAtNTg5IDQzOCAzNic+PHBhdGggZD0nTTM2Ni01ODljLTYgMS0xMSA1LTE2IDktNiA3LTEwIDE2LTEwIDI2IDAgMjAtMTUgMzYtMzQgMzZoLTQxMWMtOSAwLTE4LTQtMjQtMTAtNy03LTEwLTE2LTEwLTI2IDAtMTctMTItMzEtMjctMzVoNTMyJ3MgZmlsbD0ncmdiYSgyNTUsMjU1LDI1NSwwLjcpJz8+PC9zdmc+");
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  width: 158px;
  height: 20px;
  opacity: 0.7;
}

额外检查点 #

• 可以先把SVG的data URL复制到浏览器地址栏，确认SVG能正常渲染，再放到CSS中。
• 确保background-size和元素尺寸匹配，比如用cover或固定数值，避免比例失调导致显示异常。
• 检查SVG语法是否正确，比如引号闭合、标签完整。

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