css通过阴影偏移,切换svg背景及内容填充色

开发环境: vue2 阿里iconfont生成的svg图标 同一个svg

开发需求: 悬浮改变图标填充以及背景色

第一个功能,放大缩小图标切换,使用2个svg,点击时触发切换即可,很容易实现

 .zoomBtn{
   &:hover{
    background-color: #eee;
  }
}

第二个关闭按钮,难点在既要改变背景,又要改变svg内容填充颜色,而实际写的时候发现阿里svg根本没法同时改变,要么内容体颜色无法变更,要么颜色被背景色覆盖,所以使用阴影偏移方案,从而只需要单svg实现需求

.closeBtn{
  &:hover{
   background-color: #e94424;
     .ttt{
       filter: drop-shadow(80px 0  white);
       transform: translateX(-80px);
      }
  }
}

原理是将本体偏移到父盒子外面隐藏,overflow:hidden;而hover时,本体移出,阴影移到本体位置,交换位置

hover时最终效果