如何动态修改::after伪元素中SVG背景的fill填充颜色

失效原因 #

类名控制不生效核心是两点：

• ::after是伪元素，不属于真实DOM节点，无法直接通过JS选取修改属性
• 当前SVG填充色%23222222是硬编码在background-image的data URI字符串里的，单纯给父元素加类名不会自动替换URI内写死的颜色值

方案1：纯CSS类名控制（优先推荐，无JS依赖） #

利用CSS原生关键字currentColor实现颜色继承：data URI内的SVG作为背景图时，可以识别到宿主伪元素的color属性值，只需要把SVG里硬编码的fill值替换为currentColor，之后通过类名修改伪元素的color属性就能控制填充色。

修改后的核心CSS代码：

section::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 20vw;
    background-size: 100%;
    transform: translate(0, 100%);
    background-color: #fff;
    /* 替换原硬编码fill值为currentColor */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 1185 248'><circle cx='76' cy='120' r='20'/><circle cx='870' cy='201.1' r='10'/><circle cx='814.5' cy='165.6' r='25'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z'/></svg>");
    /* 默认填充色，对应原#222222 */
    color: #222;
}

/* 自定义类名切换颜色 */
section.fill-red::after {
    color: #ef4444;
}
section.fill-blue::after {
    color: #3b82f6;
}

使用时直接给section标签加对应类名即可，比如<section class="fill-red">，填充色会自动切换为红色，所有现代浏览器全兼容。

方案2：JS动态设置任意色值 #

如果需要运行时动态传入自定义颜色（比如取色器选色场景），可以直接拼接新的data URI字符串，通过行内样式覆盖原有background-image属性。

核心JS代码：

/**
 * 修改section::after的SVG填充色
 * @param {HTMLElement} sectionEl 目标section元素
 * @param {string} hexColor 十六进制颜色值，支持#开头格式
 */
function changeSvgFill(sectionEl, hexColor) {
    // 转义#为URL编码格式，避免被识别为URL片段导致SVG解析失败
    const safeColor = hexColor.replace('#', '%23');
    const bgUrl = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='${safeColor}' viewBox='0 0 1185 248'><circle cx='76' cy='120' r='20'/><circle cx='870' cy='201.1' r='10'/><circle cx='814.5' cy='165.6' r='25'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z'/></svg>")`;
    // 行内样式优先级高于CSS类，直接覆盖生效
    sectionEl.style.backgroundImage = bgUrl;
}

// 调用示例
const section = document.querySelector('section');
changeSvgFill(section, '#10b981'); // 把填充色改成绿色

避坑提示 #

不要尝试通过getComputedStyle获取伪元素样式对象后直接修改属性，伪元素返回的样式对象是只读的，修改不会触发页面重绘生效。

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