嘿，这两个问题问得相当精准，我来给你一步步梳理清楚：

1. 是否可在SVG background-image中使用CSS variables？ #

答案是可以，但有严格的适用场景：

• 当你把SVG以内联Data URI的形式写在background-image的url()里时，CSS变量是能正常生效的——因为这种情况下，SVG代码属于当前页面CSS上下文的一部分，能共享页面定义的CSS变量。
• 但如果是引用外部独立的SVG文件（比如url('my-icon.svg')），那CSS变量就没法穿透生效了，因为外部SVG是单独的资源，它的样式上下文和当前页面完全隔离，无法读取页面的CSS变量。

给你举个内联生效的实际例子（注意要对SVG里的特殊字符做URI编码，比如{}转成%7B/%7D，#转成%23等）：

:root {
  --svg-primary-fill: #ff6347;
}

.icon-box {
  width: 150px;
  height: 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect width='100%25' height='100%25' fill='%23f0f0f0' /%3E%3Ccircle cx='75' cy='75' r='50' fill='%26%23x7B%3Bvar(--svg-primary-fill)%7D' /%3E%3C/svg%3E");
}

2. 当CSS variables在SVG background-image中无法生效时的解决办法 #

如果遇到变量不生效的情况（比如用了外部SVG），可以试试这几种可行方案：

方案一：将外部SVG转为内联Data URI #

把外部SVG的代码直接转成Data URI写入CSS的background-image中，这样就能让SVG共享页面的CSS变量上下文。你可以手动对SVG代码做URI编码，或者用工具处理（注意转义所有特殊字符），之后就能像上面的例子一样使用CSS变量了。

方案二：用CSS Mask/Clip-path替代（针对形状类SVG） #

如果你的SVG只是用来做遮罩或形状展示，完全可以用CSS的mask-image属性配合内联SVG来实现，同样能正常使用CSS变量：

:root {
  --mask-opacity: 0.7;
}

.masked-box {
  width: 200px;
  height: 200px;
  background: linear-gradient(45deg, #2196F3, #FFC107);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpolygon points='100,0 200,200 0,200' fill='rgba(0,0,0,%26%23x7B%3Bvar(--mask-opacity)%7D)' /%3E%3C/svg%3E");
}

方案三：JavaScript动态注入并绑定变量 #

如果必须使用外部SVG，可以通过JS加载SVG内容，动态读取页面CSS变量的值并替换到SVG中，再转为Data URI设置为背景图：

// 获取CSS变量值
const fillColor = getComputedStyle(document.documentElement).getPropertyValue('--svg-fill').trim();

// 创建SVG元素并设置内容
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '200');
svg.innerHTML = `<rect width="100%" height="100%" fill="${fillColor}" />`;

// 转为Data URI并设置背景
const svgData = new XMLSerializer().serializeToString(svg);
const dataUri = `data:image/svg+xml,${encodeURIComponent(svgData)}`;
document.querySelector('.target-box').style.backgroundImage = `url(${dataUri})`;

方案四：用@supports做降级兼容 #

部分旧浏览器可能不支持在Data URI的SVG中使用CSS变量，这时可以用@supports做特性检测，提供静态SVG作为降级方案：

.target-box {
  /* 静态降级方案 */
  background-image: url('static-icon.svg');
}

/* 检测支持Data URI SVG和CSS变量的浏览器 */
@supports (background-image: url("data:image/svg+xml,%3Csvg%3E%3C/svg%3E")) and (var(--test): red) {
  .target-box {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='100' cy='100' r='80' fill='%26%23x7B%3Bvar(--svg-fill)%7D' /%3E%3C/svg%3E");
  }
}

内容的提问来源于stack exchange，提问作者François Romain