我有一個 SVG li::marker，我想根據字體顏色更改顏色。我想像這樣使用它，我把 fill="currentColor" 放在哪里，但這不起作用。我該如何解決這個問題？
li::marker {
content: url("data:image/svg xml,
");
}
我還嘗試使用 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>
謝謝！
uj5u.com熱心網友回復：
通過使用 css 中的屬性內容，可以得到一個沒有 SVG 標簽和屬性的字串。嘗試使用其他顏色類的這種方法。
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 # => #, example: #fff => #fff */
--pink-fill: url("data:image/svg xml,
");
--orange-fill: url("data:image/svg xml,
");
--purple-fill: url("data:image/svg xml,
");
}
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489938.html