如何在 CSS 中更改：：marker SVG colored颜色

发布于06月09日

我有一个SVG li::标记，我想根据字体 colored颜色更改 colored颜色 .我想这样使用它，我把fill="currentColor"放在这里，但这不起作用.我怎样才能解决这个问题？

li::marker {
    content: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}

我还try 导入带有URL的图标，但相同:

li::marker {
    content: url(/assets/images/icons/list-marker.svg);
}

<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z" fill="currentColor"/>
</svg>

谢谢

推荐答案

通过在css中使用属性content，可以得到一个没有SVG标记和属性的字符串.使用其他 colored颜色类try 这种方法.

body {
  color: aliceblue;
  background-color: hsl(201, 27%, 10%);
}

li {
  padding-inline-start: 0.5rem;
  margin-block: 0.2rem;
}
li.pink strong {
  color: #ea4c89;
}
li.orange strong {
  color: #f49d37;
}
li.purple strong {
  color: #a16cf4;
}

li::marker {
  /* Replace fill attribute color # => %23, example: #fff => %23fff */

  --pink-fill: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='%23ea4c89'/%3E%3C/svg%3E%0A");
  --orange-fill: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='%23F49D37'/%3E%3C/svg%3E%0A");
  --purple-fill: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='%23A16CF4'/%3E%3C/svg%3E%0A");
}
li.pink::marker {
  content: var(--pink-fill);
}
li.orange::marker {
  content: var(--orange-fill);
}
li.purple::marker {
  content: var(--purple-fill);
}

<ul>
  <li class="pink"><strong>Color: </strong>Frandango Pink</li>
  <li class="orange"><strong>Color: </strong>Carrot Orange</li>
  <li class="purple"><strong>Color: </strong>Medium Purple</li>
</ul>