通過css改變svg img的顏色

oogh 發(fā)布于2019-04-23 11:55 / 4066人閱讀

摘要：需求如下圖，的時(shí)候改變圖標(biāo)顏色，圖標(biāo)為引入的一般的解決辦法有字體圖標(biāo)改變的屬性在事件中切換圖片老一點(diǎn)的方案是切換背景但是為了更小的開銷，一般為更好的解決方案，的顏色是在標(biāo)簽內(nèi)通過屬性寫死的，所以用到了使用了濾鏡中的。

?需求如下圖，hover的時(shí)候改變圖標(biāo)顏色，圖標(biāo)為引入的svg img

一般的解決辦法有：1.字體圖標(biāo)改變css的color屬性；2.js在hover事件中切換圖片；3.老一點(diǎn)的方案是hover切換背景？

但是為了更小的開銷，一般css為更好的解決方案，svg的顏色是在標(biāo)簽內(nèi)通過fill屬性寫死的，所以用到了使用了CSS3濾鏡filter中的drop-shadow。

代碼如下：

              
                {styles.image}>
                  
                
                {item.line1}
                {item.line2}

section{
      .image{
        display: inline-block;
        overflow: hidden;
      }
      img{
        position: relative;
        left: 0;
        margin-bottom: .1rem;
        filter: drop-shadow(#ffffff 80px 0);　　　　
　　　　 border-left: 30px solid transparent;
　　　　 border-right: 30px solid transparent;

} &:hover{ background-color: gray; img{ left: -80px; } } }


drop-shadow(h-shadow v-shadow blur spread color)：給圖像設(shè)置一個(gè)陰影效果。其中?分別設(shè)置陰影的偏移量，且必填。具體可以查看w3c的標(biāo)準(zhǔn)

?主要的實(shí)現(xiàn)原理就是設(shè)置需要的陰影效果，并隱藏，hover時(shí)切換顯示就好。

但是發(fā)現(xiàn)，在safari瀏覽器中，圖片主體隱藏后，陰影也消失了，查看filter的兼容發(fā)現(xiàn)safari其實(shí)是支持這個(gè)屬性的，所以給原圖片加上了透明邊框

border-left: 30px solid transparent;//防止drop-shadow主體超出視線隱藏后陰影消失
border-right: 30px solid transparent;

云服務(wù)器 GPU云服務(wù)器 js 修改svg顏色改變背景顏色 html改變表格顏色改變html頁面顏色

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1356.html

相關(guān)文章

利用CSS改變圖片顏色的100種方法！

摘要：前言說到對圖片進(jìn)行處理，我們經(jīng)常會(huì)想到這類的圖像處理工具。或者是的時(shí)候，對圖片的對比度，陰影進(jìn)行處理。過濾器通常被用于調(diào)整圖片，背景和邊界的渲染。最后，安利我們的公眾號(hào)前端指南。前言說到對圖片進(jìn)行處理，我們經(jīng)常會(huì)想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會(huì)需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色?；蛘呤莌over的時(shí)候，對圖片的對比度，陰影...

Keven 2019-08-02 16:06 評(píng)論0 收藏0
利用CSS改變圖片顏色的100種方法！

摘要：前言說到對圖片進(jìn)行處理，我們經(jīng)常會(huì)想到這類的圖像處理工具?；蛘呤堑臅r(shí)候，對圖片的對比度，陰影進(jìn)行處理。過濾器通常被用于調(diào)整圖片，背景和邊界的渲染。最后，安利我們的公眾號(hào)前端指南。前言說到對圖片進(jìn)行處理，我們經(jīng)常會(huì)想到PhotoShop這類的圖像處理工具。作為前端開發(fā)者，我們經(jīng)常會(huì)需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色?；蛘呤莌over的時(shí)候，對圖片的對比度，陰影...

pinecone 2019-08-30 15:54 評(píng)論0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出圖層里的圖標(biāo)右鍵選中這個(gè)圖層右擊這個(gè)圖層把這個(gè)圖層放到新文件點(diǎn)擊圖片的按鈕自動(dòng)切圖到最小再調(diào)整一下畫布大小將圖片設(shè)置為長寬一樣導(dǎo)出即可在頁面里圖片會(huì)默認(rèn)保持比例所以只要設(shè)置寬高的其中一種就可以了摳圖的前端現(xiàn)在基本沒有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出圖層里的圖標(biāo) 右鍵選中這個(gè)圖層showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 評(píng)論0 收藏0
你知道SVG Sprites是什么嗎，還在用css sprite就太low了

摘要：它是基于，由聯(lián)盟進(jìn)行開發(fā)的。是一種采用來描述二維圖形的語言這個(gè)大家都知道，那么元素是什么呢單純翻譯的話，是符號(hào)的意思，然我的理解是元素用來定義一個(gè)圖形模板對象，它可以用一個(gè)元素實(shí)例化。 showImg(https://segmentfault.com/img/bVbhAl9?w=1278&h=722); 　　大家好，這里是@IT·平頭哥聯(lián)盟，我是首席填坑官——蘇南(South·Su)，...

fevin 2019-08-30 15:54 評(píng)論0 收藏0
用css繪制各種形狀

摘要：同樣的方法可以實(shí)現(xiàn)下面這種布局具體代碼如下通過把改成或，就可以立即得到左側(cè)傾斜或右側(cè)傾斜的標(biāo)簽頁。簡單的餅圖的繪制思路是把圓形的左右兩部分指定為上述兩種顏色，然后用偽元素覆蓋上去，通過旋轉(zhuǎn)來決定露出多大的扇區(qū)。自適應(yīng)的橢圓 1.自適應(yīng)的橢圓實(shí)現(xiàn)方式是通過border-radius這個(gè)屬性；border-radius它可以單獨(dú)指定水平和垂直半徑。用 / 分隔這兩個(gè)值。并且該屬性的值不...

Lionad-Morotar 2019-08-29 12:30 評(píng)論0 收藏0