使用svg图片， 鼠标移入变色

1. svg格式，正常显示， 鼠标移入后变色，使用filter:drop-shadow实现

// item.category_image  是后台传过来的svg链接地址
// https://test-pic.tsingglobal.com/CATE1716644534203.svg
<img :src="item.category_image" alt="" class="newces" />

.newces {
  position: relative;
  left: -1000px;
  filter: drop-shadow(#000000 1000px 0);
}
.newces:hover {
  filter: drop-shadow(#0072F5 1000px 0) !important;
}

这样就可以实现了
但是这种方式在safari浏览器不显示，这是一个兼容性的问题，
safari对filter:drop-shadow渲染方式不同.其只渲染元素可视的部分.

2. 使用-webkit-mask-box-image

<div class="apple" 
  :style="{'-webkit-mask-box-image': 'url('+ item.category_image +')'}"
></div>

.apple {
  width: 36px;
  height: 36px;
  background: #000000;
  margin: 0 auto;
}
.apple {
  background: #0072F5 !important;
}

这样在safari浏览器可以实现，而且在谷歌浏览器也能用
但是还有一个问题，在我的Edge浏览器上 这两种方法都不行，
再研究吧~