如何用CSS修改作为背景图的SVG填充/描边颜色？

我通过将SVG作为背景图嵌入列表项，实现了自定义列表图标，示例代码如下：

原CSS代码 #

ul {
  padding: 0;
}

li:nth-child(1) {
  list-style: none;
  padding: 10px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='blue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-home'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}

li:nth-child(2) {
  list-style: none;
  padding: 10px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='blue' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>
</body>
</html>

现在需要实现：一个页面保持图标蓝色，另一个页面默认图标为红色，且不能重复整个SVG的data URL，同时不能影响列表项的文本颜色（使用filter会同时改变文本，不可行）。

方法1：利用currentColor继承颜色 #

将SVG中的固定颜色替换为currentColor，让图标颜色继承元素的color属性，再通过span包裹文本单独设置文本颜色，实现图标与文本颜色分离。

修改后的CSS代码 #

ul {
  padding: 0;
}

li {
  list-style: none;
  padding: 10px 30px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
  /* 图标颜色继承此值 */
  color: blue;
}

li:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-home'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

li:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
}

/* 单独设置文本颜色，避免继承li的color */
li span {
  color: #333;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
    <li><span>First item</span></li>
    <li><span>Second item</span></li>
</ul>
</body>
</html>

切换红色图标 #

在需要红色图标的页面，只需添加一行CSS覆盖color值：

li {
  color: red;
}

方法2：使用CSS变量控制SVG颜色 #

将SVG中的固定颜色替换为编码后的CSS变量，通过定义根变量值实现不同页面的颜色切换，无需修改HTML结构。

修改后的CSS代码 #

/* 定义默认图标颜色 */
:root {
  --icon-color: blue;
}

ul {
  padding: 0;
}

li {
  list-style: none;
  padding: 10px 30px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}

li:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23%7Bvar%28--icon-color%29%7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-home'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

li:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23%7Bvar%28--icon-color%29%7D' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
}

切换红色图标 #

在需要红色图标的页面，只需修改根变量值：

:root {
  --icon-color: red;
}

• 方法1：实现简单，兼容性好，但需要修改HTML结构包裹文本；
• 方法2：无需修改HTML，通过变量灵活切换颜色，现代浏览器均支持。

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