如何为背景图内嵌SVG的stroke属性设置十六进制颜色替代RGBA

失效核心原因：# 属于URL特殊字符，是锚点标识符，直接放在data URI中会被URL解析逻辑截断，导致SVG属性读取异常。打包工具自动把RGBA转成十六进制时没有做URL转义，所以打包后就失效了。

以下是可落地的解决方案：

• 方案1：直接转义十六进制颜色的#号（改造成本最低）
  把stroke属性中的#替换为URL编码%23即可直接生效，修改后的CSS代码如下：

#keyword div {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23044757' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

• 方案2：调整打包工具配置，禁止转换data URI内的颜色值
  如果不希望修改SVG代码，可配置打包工具跳过data URI内SVG的颜色转换逻辑，避免自动生成未转义的十六进制颜色：

  • Webpack生态（css-minimizer-webpack-plugin）配置示例：

  // webpack.config.js 相关配置
  module.exports = {
    optimization: {
      minimizer: [
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: [
              'default',
              {
                colormin: { exclude: [/^data:image\/svg\+xml/] }
              }
            ]
          }
        })
      ]
    }
  }
  

  • Vite项目配置示例：

  // vite.config.js 相关配置
  export default defineConfig({
    css: {
      lightningcssOptions: {
        exclude: {
          colors: true
        }
      }
    }
  })
  

• 方案3：调整SVG引入方式，规避URL转义问题
  直接把SVG内联到HTML代码中，通过CSS直接控制stroke属性，后续修改颜色更灵活，也不会出现转义异常：

<figure id="keyword">
  <div>
    <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'>
      <path stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/>
    </svg>
  </div>
</figure>

对应CSS：

#keyword path {
  stroke: #044757;
}

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