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