首页 前端知识 img标签中引用本地icon.svg,如何在html显示中改变icon颜色

img标签中引用本地icon.svg,如何在html显示中改变icon颜色

2024-05-24 08:05:57 前端知识 前端哥 647 956 我要收藏

最近在搞一个html网页,纯纯小白,遇到什么问题都要一个个去查、去解决。

写这篇blog也就是因为在搞网页的过程中,看着黑色icon不顺眼,想换个颜色,于是去找方法解决。

所以这是一个在试了多种方法,遇到许多奇奇怪怪问题之后,终于成功了的故事。

下面介绍一下自己成功更换icon颜色的方法。


1.我的html里面使用img标签直接调用本地下载下来的icon.svg图片,用来在网页中显示;

(person-outline.svg是我在https://ionic.io/ionicons下载下来,存放于本地的)

<img src="{% static "icon/person-outline.svg" %}" style="display:block" >

运行我的网页,初始效果是这样的:

2.我想换个其他颜色,于是尝试了下面这种方法。

找到本地该图标的.svg文件,用记事本打开,可以看到如下内容。

改变颜色的关键在这里面的fillstroke两个值。

我首先将第一个fill的值改为了“#8FAADC”

(要用十六进制,别写代码习惯了直接用英文,别问我怎么知道的😥)

结果变成了这样:

这下我知道了,图标和印章一样,也是分阴阳的。(毕竟我对html真的纯小白😂)

于是我就保持fill不动,改变所有stroke的值为“#8FAADC”,得到结果:

是不是有哪里不对劲?

是的,为啥其他线条都变了,就剩一个点还是黑色的!!!

这就是下一个需要关注的点了……

3.后来通过再读svg我发现,里面共有4个path,但fill和stroke对才出现了3次,最后一个path中,只有一个d值,这好像就是那个黑点点了……

于是我就直接在最后一个path里面试着分别添加fill或stroke,第一次就成功,然后黑点就顺利变色了!

最终我将svg改成了这样(红色的地方是我改过的):

最后出来的效果:


到此,又一个小问题终于被解决……

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9252.html
标签
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!