[JavaScript知识库]vue-admin-template框架下修改svg的颜色

嘿嘿，好久不更博客啦。突然记起这个修改svg颜色这个挺好玩的，记录一下。哈哈哈哈，没想到svg还能这样玩。

需求：vue-admin-template里面某个模块鼠标滑过时里面的图标变颜色

首先解决方案有很多，改background-image,改img的路径。我都觉得这些最终都是要换图片，有没有直接在图片的基础上改个颜色就ok的。哈哈，svg一下子映入脑子。这玩意阿里icon-font都可以改颜色，啧啧，那么我是不是也可以尝试。

说干就干。百度走一波，首先看到一个哥们的博客。如图：

https://blog.csdn.net/weixin_41615439/article/details/107181777

懒得点开链接的，我就把代码放进来看：

.svg{
    fill:currentColor;
    color:red;
}

看完直接上手。发现，咦？好像还是不行啊。然后再找一篇

https://blog.csdn.net/kaimo313/article/details/107772602

嗯，这哥们说的就是在vue中，怎么将svg集成能改颜色的，主要css代码如下：

.svg-icon {
  fill: currentColor; //此属性为更改svg颜色属性设置
  stroke: currentColor;
  overflow: hidden;
}

但是，这个并不没有实现我鼠标划过就能改色，解决不了问题，然后，我发现一哥们，直接暴力改颜色，哎，可惜了，忘记收藏那个哥们的链接地址，不然也要推一波。最给力是他教我改fill变成currentColor。

来，直接上修改方案，

第一步，进到svg的代码，在path里面找到fill然后修改成fill="currentColor"

<svg id="_1.Bace基础_3.Icon图标_文件_folder" data-name="1.Bace基础/3.Icon图标/文件/folder" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <rect id="folder_Background_" data-name="folder (Background)" width="16" height="16" fill="none"/>
  <path id="folder" d="M12,11.5H1a1,1,0,0,1-1-1V1A1,1,0,0,1,1,0H4.091l.131.1,1.94,1.4H12a1,1,0,0,1,1,1v8A1,1,0,0,1,12,11.5ZM1,1v9.5H12v-8H5.838l-.131-.1L3.767,1Z" transform="translate(1.5 2.5)" fill="currentColor" />
</svg>

第二步，修改类名

.svg{
    fill:currentColor;
    color:rgba(51, 51, 51, 0.8);
}

第三步，鼠标经过对应div,修改hover事件

.node:hover .svg{fill:currentColor;color: #001B84}

经上，完成了svg的改色。嘿嘿，有意思吧，冷门吧，解决了开心不。哈哈哈。