将 svg 标签转换为图像中的嵌入 svg答案

【问题标题】：converting svg tags to embedded svg in image将 svg 标签转换为图像中的嵌入 svg
【发布时间】：2020-04-20 15:55:36
【问题描述】：

我想使用 Tailwind CSS 创建响应式导航栏并遵循本指南

https://youtu.be/ZT5vwF6Ooig?list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&t=74

不幸的是，没有 SVG 路径的链接，所以我只有

<button>
  <svg class="h-6 w-6 text-gray-700 fill-current" viewBox="0 0 24 24">
    <path fill-rule="evenodd" d="... the missing svg path ..." />
  </svg>
</button>

所以我尝试使用外部 svg 自己完成。出于测试目的，我正在使用此 svg

https://www.iconfinder.com/icons/3324998/menu_icon

由于 svg 没有 src 标签，我决定将它嵌入到 img 标签中。我目前有

img {
  content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMyIgeDI9IjIxIiB5MT0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSI2IiB5Mj0iNiIvPjxsaW5lIHgxPSIzIiB4Mj0iMjEiIHkxPSIxOCIgeTI9IjE4Ii8+PC9zdmc+");
}

<link href="https://unpkg.com/tailwindcss@1.1.4/dist/tailwind.min.css" rel="stylesheet" />

<button>
  <img class="h-6 w-6 text-red-700" />
</button>

我希望图像是红色的，但它仍然是黑色的。我怎样才能修复它的颜色？此外，我不确定是否需要更多属性。也许我不必将它嵌入图像标签中，其他解决方案更适合？

提前致谢

【问题讨论】：

标签： html css svg tailwind-css

【解决方案1】：

您还可以使用尾风更改 SVG 的填充，使用 fill-current 类，然后像任何常规文本一样为其着色，如下所示：

<svg class="w-4 h-4 fill-current text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
  <path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/>
</svg>

如您所见，SVG的高度和宽度也可以设置。

【讨论】：

【解决方案2】：

我认为您不能通过 CSS 修改图像颜色。
不要使用img 标签，而是尝试做类似的事情，这样您就可以轻松更改 jmenu 颜色：

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    width: 35px;
    height: 5px;
    background-color: red; /* Here you can change your background color */
    margin: 6px 0;
  }
</style>
</head>
<body>

<div></div>
<div></div>
<div></div>

</body>
</html>

我希望这段代码可以解决你的问题。

编辑：

我还在this 帖子中找到了解决您问题的好方法：
在这里您可以看到一个仅使用 CSS 过滤器的演示。

.filter-red{
        filter: invert(47%) sepia(98%) saturate(7304%) hue-rotate(352deg) brightness(108%) contrast(130%);
    }

&lt;img src="https://cdn4.iconfinder.com/data/icons/feather/24/menu-512.png" class="filter-red"&gt;

【讨论】：

感谢您的回复。不幸的是，我不想自己创建菜单，我想使用设计好的 svg。
您对第二种解决方案有何看法？
hm 是的，这似乎是一个很好的解决方法 :) 我会接受你的回答，但我希望会有一个更简单的解决方案，因为我总是必须在更改过滤器时计算过滤器颜色：/
谢谢 :-)。但是，您可以轻松计算过滤器here：它非常快。祝你好运！