如何通过外部CSS访问data URI格式SVG背景的内部id/class并修改样式

站点多套配色主题基于CSS自定义属性实现，支持变量二次抽象封装，基础定义示例：

:root{
   --main-color: red;
   --lighht-color: gray;
   --dark-color: brown;
    /* 其他基础色变量 */
}

:root{
   --main-text-color: var(--dark-color);
    /* 其他业务封装变量 */
}

当前需要为复选框配置SVG格式的选中勾选图标，采用data URI方式作为background-image引入，初始实现代码如下：

input[type=checkbox]:checked{
   --check-color: blue;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' style='enable-background:new 0 0 100 100' xml:space='preserve'%3E%3Cstyle type='text/css'%3E%0A%23check%7B%0Astroke: var(--check-color);%0A%7D%0A%3C/style%3E%3Cpath id='check' style='fill:none;stroke-width:18;stroke-miterlimit=10' d='m24.3 36.8 20.9 29.3 45.7-41.8'/%3E%3C/svg%3E");
   stroke: red !important;
}

尝试从外部修改SVG勾选颜色的操作全部失效，包括在:root下设置stroke为green、定义--check-color为lime、直接选中SVG内id为check的元素设置stroke为pink。核心原因是data URI内的SVG属于独立DOM文档，主文档CSS无法直接穿透作用到内部元素。

已评估但存在缺陷的方案 #

• CSS遮罩（CSS-masking）：简单单色场景可实现，但实际业务需要通过多个SVG元素呈现多种颜色，实现逻辑复杂，维护难度高
• SASS预编译方案：SASS为编译期工具，无法读取运行时的CSS自定义属性值，也适配不了CSS变量的作用域嵌套规则，实现难度大，不是理想方案
• JavaScript/DOM操作方案：注入span标签包裹SVG的方式会破坏可访问性、语义合理性与HTML合法性；直接读取background-image做字符串替换的方案需要处理复选框状态同步、通用颜色字符串匹配、URL编解码、后续样式/图形更新适配等问题，维护成本极高。

单色场景最优实现：利用currentColor传递颜色 #

这是零JS、兼容所有支持CSS自定义属性浏览器的最优方案，核心原理是：data URI形式的SVG作为替换内容时，内部的currentColor关键字会自动继承宿主元素的color属性计算值，不需要穿透DOM访问外部变量。
实现步骤：

1. 移除SVG内部的CSS变量引用与冗余style标签，直接给需要动态改色的路径设置stroke="currentColor"/fill="currentColor"
2. 给对应状态的复选框设置color属性，值绑定需要使用的主题变量
3. 将SVG做正确URL编码后作为background-image引入
   改后可正常生效的代码示例：

input[type=checkbox]:checked{
  /* 将需要传递的主题色赋值给元素color属性 */
  color: var(--check-color);
  /* SVG内部直接用currentColor承接颜色，无需在SVG内部定义变量 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='18' stroke-miterlimit='10' d='m24.3 36.8 20.9 29.3 45.7-41.8'/%3E%3C/svg%3E");
}

该方案完全兼容CSS自定义属性的作用域规则，全局主题切换、局部容器主题覆盖、hover/active/disabled等交互状态改色都可以自动生效，无需额外逻辑。

多色复杂场景实现：分层叠加方案 #

如果需要在单个图标内呈现多种主题色，不需要用复杂的遮罩逻辑，可以通过分层叠加实现：

1. 将多色SVG按颜色拆分为多个独立的单色SVG片段
2. 通过多层background-image叠加，或者利用关联label的::before/::after伪元素作为独立图层，每个图层承载一个单色SVG
3. 每个图层单独设置color属性绑定对应的主题变量，图层内的SVG统一用currentColor承接颜色
   该方案逻辑清晰，后续改色、调整图形只需要修改对应图层的代码，维护成本远低于遮罩和JS方案，且不会破坏语义与可访问性。

注意事项 #

• 编写SVG data URI时，特殊字符需要做正确URL编码：<编码为%3C、>编码为%3E、#编码为%23，避免解析错误
• 尽量移除SVG内部冗余的代码（比如无用的style标签、编辑器生成的冗余属性），减少data URI体积
• 该方案兼容性极佳，currentColor特性从IE9开始支持，完全覆盖支持CSS自定义属性的浏览器范围

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