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

你不能只用顏色改變圖像的顏色：藍色; 也許這會奏效：

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

或者只是找到帶有藍色復選標記的另一個圖像，並以相同的方式添加它

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