[JavaScript知识库]修改svg图片颜色，动态改变svg图片颜色（以及切换主题时展示正常）

1、需求：项目中按钮使用到svg做图标，未选中表格数据则置灰，选中则高亮，如图：

2、组件代码，svg 使用到 drop-shadow 阴影展示 ， 所以父元素加 overflow: hidden;

// index.vue
<a-button
  @click="handleDelMore"
  class="btn-ml btn-blue-color btn-svg"
  :disabled="state.selectedRowKeys.length == 0"
>
  <img
    class="btn-img"
    :class="{
      'btn-img-blue-checked': state.selectedRowKeys.length != 0,
    }"
    src="../../../assets/imgs/btn/editMore.svg"
    alt=""
  />
  批量修改</a-button
>
<a-button
  @click="handleDelMore"
  class="btn-ml btn-green-color btn-svg"
  :disabled="state.selectedRowKeys.length == 0"
>
  <img
    class="btn-img"
    :class="{
      'btn-img-green-checked': state.selectedRowKeys.length != 0,
    }"
    src="../../../assets/imgs/btn/accessMore.svg"
    alt=""
  />
  批量接入</a-button
>
<a-button
  @click="handleDelMore"
  class="btn-ml btn-red-color btn-svg"
  :disabled="state.selectedRowKeys.length == 0"
>
  <img
    class="btn-img"
    :class="{
      'btn-img-red-checked': state.selectedRowKeys.length != 0,
    }"
    src="../../../assets/imgs/btn/revokeMore.svg"
    alt=""
  />
  批量停用</a-button
>
<a-button
  @click="handleDelMore"
  class="btn-ml btn-orange-color btn-svg"
  :disabled="state.selectedRowKeys.length == 0"
>
  <img
    class="btn-img"
    :class="{
      'btn-img-orange-checked': state.selectedRowKeys.length != 0,
    }"
    src="../../../assets/imgs/btn/approveMore.svg"
    alt=""
  />
  批量审批</a-button
>
<style lang="less" scoped>
.deviceAccessManage {
  .btn-svg {
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .btn-img {
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 100px 0);
    transform: translateX(-104px);
  }
  .btn-img-blue-checked {
    filter: drop-shadow(#1C5688 100px 0);
    transform: translateX(-104px);
  }
  .btn-img-green-checked {
    filter: drop-shadow(#225F27 100px 0);
    transform: translateX(-104px);
  }
  .btn-img-red-checked {
    filter: drop-shadow(#912B3A 100px 0);
    transform: translateX(-104px);
  }
  .btn-img-orange-checked {
    filter: drop-shadow(#715120 100px 0);
    transform: translateX(-104px);
  }
}
</style>

3、在公用样式还需添加， 记得加important， 不然覆盖不了组件内的样式

// style.less
.dark {
  .deviceAccessManage {
    .btn-img {
      transform: translateX(-6px) !important;
    }
  }
}

4、完成，如上图！

治愈自己最好的方式就是忙碌和早睡。生活不简单，尽量简单过。

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读