element menu自定义图标以及css动态修改svg颜色_el-menu自定义图标

一、当svg中的fill属性已经有填充的颜色，使用drop-shadow属性更改，适合元素左边没有元素，把原有的svg图像推到可视区外

需求：如下图，使用element menu切换菜单的时候当前菜单需要高亮，正常的menu使用的是icon，会自动根据点击变化颜色，但是如果有自定义的图标就需要使用svg，这时候需要动态的设置svg的颜色

svg的颜色是在标签内通过fill属性写死的，使用CSS3滤镜filter中的drop-shadow可以更改

 .el-menu-item.is-active {
      .menu-icon {
        left: -80px;
        filter: drop-shadow($--color-primary 80px 0);
      }
    }
    .menu-icon {
      position: relative;
      margin-right: 5px;
      padding: 0 3px;
      left: 0;
    }
1
2
3
4
5
6
7
8
9
10
11
12

注意 这种方式是会把原有的图片向左移动，因为导航栏左边已经没有元素了，所以视觉上会看不见原有的svg图片

二、删除掉svg的fill属性，默认显示无色，设置svg颜色后视觉上不会显示默认svg

如果像下图设置svg的颜色之后，因为svg左边还有元素，所以原有的svg图片就会显示出来，可以采取删除fill属性，这样svg原本的图像就是透明的，

然后再设置颜色视觉上就会只显示一个svg图像

补充:后来遇到一个问题

当我还是用以上方法写的时候 发现列表里有loading状态时img就会消失(如下图),百思不得其解,后来改成下面的就可以了,这个问题的原因还没找到,只是用filter和transform就不会消失了