最近在搞一个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文件,用记事本打开,可以看到如下内容。
改变颜色的关键在这里面的fill和stroke两个值。
我首先将第一个fill的值改为了“#8FAADC”
(要用十六进制,别写代码习惯了直接用英文,别问我怎么知道的😥)
结果变成了这样:
这下我知道了,图标和印章一样,也是分阴阳的。(毕竟我对html真的纯小白😂)
于是我就保持fill不动,改变所有stroke的值为“#8FAADC”,得到结果:
是不是有哪里不对劲?
是的,为啥其他线条都变了,就剩一个点还是黑色的!!!
这就是下一个需要关注的点了……
3.后来通过再读svg我发现,里面共有4个path,但fill和stroke对才出现了3次,最后一个path中,只有一个d值,这好像就是那个黑点点了……
于是我就直接在最后一个path里面试着分别添加fill或stroke,第一次就成功,然后黑点就顺利变色了!
最终我将svg改成了这样(红色的地方是我改过的):
最后出来的效果:
到此,又一个小问题终于被解决……