css hover改变svg颜色

转自https://blog.csdn.net/qq_39785489/article/details/107781746

想要实现菜单前的icon（svg格式），根据hover改变svg颜色，并且默认选中项也是高亮。最终实现思路，参考如上连接的方法。

<div class="of-h cursor-pointer">
          <div class="btn step-init-position"></div>
        </div>

css

.step-init-position {
  background: url("../../assets/initPosition.svg") no-repeat center;
}
.of-h {
  overflow: hidden;
}
.btn {
  width: 17px;
  height: 17px;
  margin: 0 24px;
  filter: drop-shadow(#2F3335 100px 0);
  transform: translateX(-100px);
}
.cursor-pointer:hover {
  .btn {
    filter: drop-shadow(#3DB69C 100px 0);
  }
}