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

最近在搞一个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改成了这样（红色的地方是我改过的）：

最后出来的效果：

---

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