css - SVG 元素符号点的自定义颜色

Question

我有以下 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 列表中的复选标记为蓝色？

Answer 1

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

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

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

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