SVG 项目符号点的自定义颜色答案

【问题标题】：Custom color for SVG bullet pointSVG 项目符号点的自定义颜色
【发布时间】：2019-03-15 00:34:07
【问题描述】：

我有以下 CSS

ul {
  list-style: none;
}

ul > li::before {
  content: "";
  height: 1em;
  width: 1em;
  display: block;
  float: left;
  margin-left: -1.5em;
  margin-top: 7px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
}

ul > li::before {
  background-image: url(../images/check-mark.svg);
}

下面的 HTML 效果很好

  <ul>
    <li>first</li>
    <li>last</li>
  </ul>

现在，我想使用相同的复选标记添加第二个列表，但颜色不同。

所以，我更新了我的代码如下

HTML

   <ul class="blue">
     <li>first</li>
     <li>last</li>
   </ul>

CSS

svg {
  fill: currentColor;
}

ul.blue > li::before {
  color: blue;
}

但是复选标记仍然是黑色的。如何使blue 列表中的复选标记变为蓝色？

【问题讨论】：

你需要应用 fiter 或者使用另一个 SVG（这里有个想法：stackoverflow.com/a/54802632/8620333）
请验证任何答案是否有帮助。

标签： css svg

【解决方案1】：

你不能只用 color: blue; 来改变图像的颜色。也许这会起作用：

ul.blue > li::before {
fill: blue;
}

或者只是找到另一个带有蓝色复选标记的图像并以相同的方式添加它

ul.blue > li::before {
  background-image: url(../images/blue-check-mark.svg); 
}

【讨论】：