如何通过CSS类修改作为背景图使用的SVG的指定部分颜色

该需求可以实现，以下是3种无需在HTML内嵌入完整SVG代码、仅通过CSS类即可切换颜色的可行方案：

方案1：CSS Mask 方案（兼容性最优，实现最简单） #

适合单图标使用场景，仅需保留单独的SVG文件即可：

1. 预处理原始SVG：将原本黄色的填充区域改为纯白色#fff，黑色区域保持#000，保存为独立的.svg文件。
2. 编写CSS代码，通过伪元素+遮罩实现可变颜色：

/* 基础按钮样式 */
.theme-btn {
  width: 48px; /* 替换为你的SVG实际宽度 */
  height: 48px; /* 替换为你的SVG实际高度 */
  background-color: #000; /* 固定黑色区域颜色 */
  position: relative;
  --theme-color: #ffd000; /* 默认黄色主题色 */
}
/* 可变颜色层 */
.theme-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--theme-color);
  /* 引入SVG作为遮罩，白色区域显示上层主题色，黑色区域透出底层黑色 */
  mask: url(./你的SVG文件路径.svg) no-repeat center / contain;
  -webkit-mask: url(./你的SVG文件路径.svg) no-repeat center / contain;
}
/* 切换主题仅需修改CSS变量即可 */
.theme-btn.red {
  --theme-color: #f00;
}
.theme-btn.blue {
  --theme-color: #0066ff;
}

方案2：Data URI 内嵌SVG方案（无额外文件请求） #

适合小尺寸SVG使用，将SVG直接编码后写入CSS，无需单独存文件：

1. 预处理原始SVG：将原本黄色区域的fill属性改为var(--theme-color, #ffd000)，黑色区域保持fill="#000"。
2. 将SVG代码做URL编码后，作为background-image写入CSS：

.theme-btn {
  width: 48px;
  height: 48px;
  --theme-color: #ffd000;
  /* 引号内替换为你编码后的SVG data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='xxx' fill='%23000'/%3E%3Cpath d='xxx' fill='var(--theme-color)'/%3E%3C/svg%3E");
}
.theme-btn.green {
  --theme-color: #0c0;
}

方案3：外部SVG Sprite + use标签方案（适合多图标复用） #

适合站点有大量SVG图标需要统一管理的场景：

1. 将你的SVG处理为符号，保存为独立的sprite.svg文件，将黄色区域填充设置为currentColor：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="robot" viewBox="0 0 24 24">
    <!-- 黑色固定区域 -->
    <path d="xxx" fill="#000" />
    <!-- 黄色可变区域 -->
    <path d="xxx" fill="currentColor" />
  </symbol>
  <!-- 可继续添加其他图标symbol -->
</svg>

2. HTML内仅需极简的引用代码，无需写入完整SVG内容：

<svg class="theme-btn">
  <use href="sprite.svg#robot" />
</svg>

3. CSS内通过color属性控制可变颜色：

.theme-btn {
  width: 48px;
  height: 48px;
  color: #ffd000; /* 对应currentColor的变量值 */
}
.theme-btn.purple {
  color: #93f;
}

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