将 svg 标签转换为图像中的嵌入 svg
Posted
技术标签:
【中文标题】将 svg 标签转换为图像中的嵌入 svg【英文标题】：converting svg tags to embedded svg in image 【发布时间】：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>我希望图像是红色的，但它仍然是黑色的。我怎样才能修复它的颜色？此外，我不确定是否需要更多属性。也许我不必将它嵌入图像标签中，其他解决方案更适合？
提前致谢
【问题讨论】：
【参考方案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%);
<img src="https://cdn4.iconfinder.com/data/icons/feather/24/menu-512.png" class="filter-red">【讨论】：
感谢您的回复。不幸的是，我不想自己创建菜单，我想使用设计好的 svg。 您对第二种解决方案有何看法？ hm 是的，这似乎是一个很好的解决方法 :) 我会接受你的回答，但我希望会有一个更简单的解决方案，因为我总是必须在更改过滤器时计算过滤器颜色：/ 谢谢 :-)。但是，您可以轻松计算过滤器here：它非常快。祝你好运！以上是关于将 svg 标签转换为图像中的嵌入 svg的主要内容，如果未能解决你的问题，请参考以下文章
在使用canvas api在浏览器中将svg转换为png时，svg中的嵌入图像在Safari中随机空白
使用 <path> 标签将图标图像转换为 svg 的最佳方法