2016年我寫過一篇文章如何使用SVG圖標，其“試驗性部分”的結語是個警告 - “抱歉，漸變填充無法工作”。

我指的是像fill: linear-gradient(red, blue)一樣的無效代碼，因為fill屬性出自SVG - 該元素內置了獨有的漸變支持；而linear-gradient則源自CSS，常用于設置背景。二者的結合效果并不理想。

我可以使用SVG的元素，但之前并未嘗試過。幾個月后我做了試驗，效果還算不錯。下面請看分享。

在HTML中添加漸變

我發現最值得信賴的方式是在HTML頁面中添加SVG元素(例如在

標簽的開始或結束位置添加)。這里應該定義一個。

`

這個元素不推薦用display:none實現隱藏效果，這樣的話某些瀏覽器會忽略漸變效果。把元素高度設為0px來實現隱藏效果是可行的。

現在我們可以在SVG圖標上使用漸變效果了:

或者在CSS里這樣寫:.icon?{??/*?gradient?and?fallback?color?*/

fill:?url(#my-cool-gradient)?#447799;

}

不過我們無法定制單個按鈕的漸變。如果想這樣做，需要在HTML中創建不同的SVG漸變定義。

使用CSS變量控制漸變色

如果我們想用CSS設置漸變色，可以通過CSS變量來實現。我們將使用CSS自定義屬性來編寫漸變定義(var(--my-custom-property)).

現在我們可以設置 - 如果需要的話 - 在CSS中還能改變這些顏色:#gradient-horizontal?{

--color-stop-1:?#a770ef;

--color-stop-2:?#cf8bf3;

--color-stop-3:?#fdb99b;}#gradient-vertical?{

--color-stop-1:?#00c3ff;

--color-stop-2:?#77e190;

--color-stop-3:?#ffff1c;}

最后，用這些效果來填充圖標:.icon-hgradient?{??fill:?url(#gradient-horizontal)?gray;??/*?We?could?use?it?as?a?stroke?fill?too:

stroke:?url(#gradient-horizontal)?gray;?*/}.icon-vgradient?{??fill:?url(#gradient-vertical)?gray;

}

使用SVG漸變填充和CSS變量測試圖標：

漸變填充會繪制圖標的每條路徑。為了避免顏色銜接不當(譬如葉子和莖的連接處)，把圖標的源SVG所有路徑或大部分路徑合并可能有效果。

在外部文件中使用漸變

這個技巧在FireFox中被證實有效，也曾適用于Edge(Edge14,15確認可用，但Edge16和預覽版又取消了支持)。請看下面的測試:兩個圖標都取自一個外部雪碧圖: sprite.svg.

第一個圖標使用了HTML頁面的漸變效果，第二個則使用了sprite.svg..icon-sprite-gradient?{??fill:?url(sprite.svg#my-warm-gradient)?red;

}

不支持此項操作的瀏覽器(Chrome,Safari,最新版Edge...)應該為第二個圖標展示一個紅色的替代填充效果。

在CSS中使用數據URL作為漸變值

如果我告訴你可以在SVG中定義漸變之后把SVG作為數據URL放在CSS中，你會怎么想? 好吧我承認是在犯傻，可它真的可以實現! 至少在Firefox中可以:P/*?Notice?the??id="grad"?in?the?SVG?URL?and?how?we’re?using?it?at?the?end.?Note?that?the?#?in?hexadecimal?colors?must?be?escaped?as?%23.?*/.icon-gradient-url?{??fill:?url("data:image/svg+xml,#grad")?purple;

}/*?Same?SVG,?in?base64?*/.icon-gradient-base64?{??fill:?url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZCc+PHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nI2ZmMDBjYycvPjxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1jb2xvcj0nIzMzMzM5OScvPjwvbGluZWFyR3JhZGllbnQ+PC9zdmc+#grad")?purple;

}

看到我們如何在URL的結尾用#grad引用漸變效果的id了嗎？目前看來只有Firefox能理解這個語法。額，太遺憾了不是嗎。

這個例子打算實現一個品紅色-紫色漸變效果。不支持此操作的瀏覽器(Chrome,Safari,Edge...)應該會展示一個紫色的備用填充效果。

概括是的，我們可以使用漸變填充!

但首先需要在HTML中添加SVG漸變

可以在SVG漸變中直接設置顏色(當然是HTML中的SVG)，或者在CSS里設置(使用CSS變量)

所有使用給定漸變效果的圖標會使用相同的顏色，但我們無法像下面一樣覆蓋某種特定顏色:.icon-gradient-override?{??/*?可行方法?*/

fill:?url(#gradient-horizontal)?gray;

/*?以下方法法不可行...?*/

--color-stop-1:?white;

--color-stop-2:?gray;

--color-stop-3:?black;}

假如你需要大量漸變效果，這個技巧可能不適合你。因為在HTML中創建10個或20個不同的SVG漸變并不實用。但對于簡單需求而言，這個技巧在所有現代瀏覽器中均可使用(如果我們放棄CSS變量的話，IE11也在支持的瀏覽器之列)。

總結

以上是生活随笔為你收集整理的html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。