如何使用CSS变量修改设置为background-image的SVG填充颜色

这个需求完全可以实现，你当前遇到的变量不生效问题，本质是作为background-image加载的SVG属于独立的外部资源上下文，和当前页面的CSS作用域隔离，页面定义的CSS变量无法直接被外部SVG读取。

• 方案1：纯CSS适配单色SVG（无JS依赖，单一场景优先选） #

  用CSS遮罩替代背景图方案，直接通过背景色控制SVG填充色，天然支持CSS变量：

  .target-element {
    /* 核心：将SVG作为遮罩层 */
    mask-image: url('your-bg.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    /* Webkit内核兼容 */
    -webkit-mask-image: url('your-bg.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    /* 背景色直接赋值为CSS变量，等价于修改SVG fill */
    background-color: var(--surface-a);
  }
  

  适用场景：仅需要修改单一填充色的SVG背景，无需额外JS逻辑。

• 方案2：动态注入变量值到Data URI SVG（支持多色SVG） #

  将SVG转为Data URI嵌入CSS，通过JS动态读取当前CSS变量的实际值，替换到SVG对应属性位置后赋值给背景图：

  // 读取当前主题下的CSS变量值
  const surfaceA = getComputedStyle(document.documentElement).getPropertyValue('--surface-a').trim();
  const surfaceB = getComputedStyle(document.documentElement).getPropertyValue('--surface-b').trim();
  // 拼接带实际色值的SVG Data URI
  const bgSvg = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path fill="${encodeURIComponent(surfaceA)}" d="M0 0h100v100H0z"/>
    <path fill="${encodeURIComponent(surfaceB)}" d="M10 10h80v80H10z"/>
  </svg>`;
  // 赋值给元素背景
  document.querySelector('.target-element').style.backgroundImage = `url(${bgSvg})`;
  

  适用场景：SVG存在多个需要适配主题的不同填充色的场景。

• 方案3：内联SVG作为背景（无资源隔离问题） #

  把SVG直接内联到页面DOM中，设置绝对定位沉到目标元素下层作为背景，此时SVG和页面共享CSS上下文，直接在SVG标签内填充fill="var(--surface-a)"即可生效。
  适用场景：SVG复用频率低、对DOM节点数量不敏感的场景，天然支持多色SVG。

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