如何更改 svg 图像的颜色？答案

【问题标题】：How to change the color of an svg image?如何更改 svg 图像的颜色？
【发布时间】：2020-09-20 04:41:38
【问题描述】：

我正在尝试更改此 svg img 的颜色：

<svg class="fill-current text-white-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/></svg>

我有以下几点：

<svg
    class="fill-current text-white inline-block h-20 w-20"
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/>
</svg>

但它不起作用。我做错了什么？

【问题讨论】：

取决于您的 CSS 包含的内容，而您尚未向我们展示。
我没有应用任何CSS
那你觉得 class="fill-current text-white inline-block h-20 w-20" 应该怎么做呢？什么是填充电流？什么是 text-white inline-block？等
对不起，我用的是顺风：tailwindcss.com/docs/fill/#app

标签： svg tailwind-css

【解决方案1】：

在 Tailwind 中，没有 ~~text-white-500~~，只有 text-white。

到目前为止，您使用填充电流做得很好。只需添加fill-current text-red-600。这会将 svg 颜色更改为 #E53E3E。检查color palette

【讨论】：

我目前有这个：不工作
这意味着您的 svg 是白色。你想要什么颜色？
不是。我看到它是黑色的
你有没有带有 text-black 的父标签。如果是，则将其删除并尝试。如果不是，则将 svg 添加到 div 标签内，并将 text-white 添加到该 div 标签。
也没有黑色的父div