使用svg圖片， 鼠標移入變色

  1. svg格式，正常顯示， 鼠標移入后變色，使用filter:drop-shadow實現(xiàn)
// 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;
}

這樣就可以實現(xiàn)了
但是這種方式在safari瀏覽器不顯示，這是一個兼容性的問題，
safari對filter:drop-shadow渲染方式不同.其只渲染元素可視的部分.

  1. 使用-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瀏覽器可以實現(xiàn)，而且在谷歌瀏覽器也能用
但是還有一個問題，在我的Edge瀏覽器上 這兩種方法都不行，
再研究吧~

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容