通過css改變svg img的顏色

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

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

?需求如下圖，hover的時候改變圖標顏色，圖標為引入的svg img

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

但是為了更小的開銷，一般css為更好的解決方案，svg的顏色是在標簽內通過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)：給圖像設置一個陰影效果。其中?分別設置陰影的偏移量，且必填。具體可以查看w3c的標準

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

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

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

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

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

轉載請注明本文地址：http://systransis.cn/yun/1356.html

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

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

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

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

pinecone 2019-08-30 15:54 評論0 收藏0
CSS4:icon全解

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

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

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

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

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

Lionad-Morotar 2019-08-29 12:30 評論0 收藏0