PNG格式小圖標的CSS任意顏色賦色技術在html元素中通過background設置圖片icon,然后通過css3的filter濾鏡的drop-shadow 設置陰影來呈現這種改變圖片顏色的效果。很不錯的方法。但是我現在的元素是在svg中,即圖片的引入是通過image元素xlink:href來引入圖片的,所以上述方法不知道怎么用來著。能給點建議不。在SVG中引入圖片除了image元素還有其他類似html中的background的方法設置背景圖片引入么?demo能不能通過這種方法來改變svg中圖片顏色呢補充:在MDN上查了關于svg 濾鏡filter的相關API,和上述drop-shadow相似的api是svg filter中的feOffset但是這個屬性只是提供偏移。w3cschools上關于這個“Drop shadows”的一些demo,但我覺得svg filter中的feOffset和css3 filter濾鏡中drop-shadow的功能還是差一點(吐槽一下w3cschool這樣的描述)。給的demo是幾個filter效果的組合使用。PNG格式小圖標的CSS任意顏色賦色技術中利用了drop-shadow"真正投影"(相對于box-shadow 僅僅是盒投影),通過定位方式隱去真是圖片顯示改變顏色的投影實現??戳艘槐閟vg中filter相關api,沒有發現相關能改變投影顏色的。至此,我的感受是不是可以得出結論,按這種方式想去改變svg中引入png圖片的顏色是行不通的。不知道還有什么其他的方案。ps: 吐槽下需求,需求是想 用戶上傳png圖片,一些交互操作改變圖片的顏色。
通過CSS改變svg image引入的圖片顏色?
牧羊人nacy
2018-10-12 15:47:23