css修改svg颜色

css修改svg颜色

第一种方式：简单易用，但小程序不支持

<style lang="scss">
    .svg-red {
        filter: invert(69%) sepia(16%) saturate(6918%) hue-rotate(316deg) brightness(100%) contrast(93%);
    }

    .svg-blue {
        filter: invert(51%) sepia(94%) saturate(1681%) hue-rotate(189deg) brightness(100%) contrast(103%);
    }

    .svg-green {
        filter: invert(74%) sepia(48%) saturate(678%) hue-rotate(48deg) brightness(86%) contrast(83%);
    }

    .svg-gray {
        filter: invert(58%) sepia(14%) saturate(126%) hue-rotate(181deg) brightness(99%) contrast(84%);
    }
</style>

第二种方式

  <div class="svg">
       <img src="./firefox-logo.svg" class="svg-color">
   </div>

//css
.svg {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.svg-color {
  transform: translateX(30px);
  filter: drop-shadow(#ff0000 -30px 0px 0px);
}