CSS, CSS3, 網頁設計

[教學] 利用CSS3混合模式,實現SVG檔也可更改顏色

梅干2018/10/04
梅問題-[教學] 利用CSS3混合模式,實現SVG檔也可更改顏色
  隨著現在裝置的解析愈來愈高,因此為了能讓圖像,在高解析的裝置下,依然清晰不模糊,這時候iconfont或SVG,就變成是首選,無論透過那一種方式,影像都是向量格式,所以任意的縮放,都能保有最佳的影像解晰,當使用iconfont再搭配CSS的color屬性,就可快速的更改圖示顏色,雖然說很方便,但唯一比較麻煩的是,得將畫好的圖示或LOGO轉成iconfont才能使用。
  雖然說SVG方便使用,但比較可惜的是,無法透過CSS來改變它的色彩,但現在這個問題有解啦!只需透過CSS3的混合模式,立即就能實現將SVG更換顏色,甚至還可以套用漸層色,因此當使用SVG的朋友,又想更改SVG圖檔顏色的朋友,現在就一塊來看看,要如何透過CSS3的background-blend-mode來實現吧!
Step1
當要替換SVG的顏色,有個重點就是,需將背景填入白色色塊。
梅問題-利用CSS3混合模式,實現SVG檔也可更改顏色
Step2
接著再以背景的方式,將SVG檔載入,正常情況下當SVG設計什麼顏色,就會依照所設定的為主。
.android {
    width: 200px;
    height: 200px;
    margin: 50px;
    text-align: center;
    font-size: 100px;
    line-height: 420px;
    float: left;
    background-image: url("android-logo.svg");
    background-size: cover;
  }

梅問題-利用CSS3混合模式,實現SVG檔也可更改顏色
Step3
這時再利用,背景填色以及加入CSS3混合模式,立即就能實,將SVG更換顏色,甚至要替換成漸層色也沒問題,真的只能說有CSS3真好。
background-image:linear-gradient(#f00, #00f),url("android-logo.svg");
background-blend-mode: screen;

梅問題-利用CSS3混合模式,實現SVG檔也可更改顏色