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

Question

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

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

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

<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>

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

提前致谢

Answer 1

我认为您无法修改来自 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 post:
中找到了解决问题的好方法在这里你可以看到一个只使用 CSS 过滤器的演示。

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

<img src="https://cdn4.iconfinder.com/data/icons/feather/24/menu-512.png" class="filter-red">

Answer 2

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

<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的高宽也是可以设置的

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

converting svg tags to embedded svg in image

html

css

svg

tailwind-css