圖標變色的方法-html教學-PHP中文網

拿QQ圖示來說事

1.將紅色和灰色的QQ圖示放到一個PNG圖片裡，透過background-position、over:hidden來控製圖示的展示。

2.將QQ圖示製作成font字體，透過font-face引用字體，例如QQ圖示對應者字母A，那我可以這樣用：A

3.使用svg-filter濾鏡為QQ圖片上色，下面是一個svg的濾鏡。

<span style="color: #0000ff;"><</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="160"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="160"</span><span style="color: #ff0000;"> viewBox</span><span style="color: #0000ff;">="0 0 160 160"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">><</span><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="a"</span><span style="color: #ff0000;"> color-interpolation-filters</span><span style="color: #0000ff;">="sRGB"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="arithmetic"</span><span style="color: #ff0000;"> k2</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="composite1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="composite1"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feFlood </span><span style="color: #ff0000;">flood-opacity</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> flood-color</span><span style="color: #0000ff;">="#3A9E00"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="flood1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="flood1"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="multiply"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="blend1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="screen"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="blend2"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="in"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="fbSourceGraphicAlpha"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="arithmetic"</span><span style="color: #ff0000;"> k2</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="composite1"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="composite1"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feFlood </span><span style="color: #ff0000;">flood-opacity</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> flood-color</span><span style="color: #0000ff;">="#3A9E00"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="flood1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="flood1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="multiply"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="blend1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="screen"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="blend2"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="in"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="composite2"</span><span style="color: #0000ff;">/></</span><span style="color: #800000;">filter</span><span style="color: #0000ff;">></</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">><</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="310.637"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="460.673"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="162.715"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="154.262"</span><span style="color: #ff0000;"> transform</span><span style="color: #0000ff;">="matrix(.38065 0 0 .4103 -38.244 -109.02)"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="#d3d7cf"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="#2e3436"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> stroke-linecap</span><span style="color: #0000ff;">="round"</span><span style="color: #ff0000;"> stroke-linejoin</span><span style="color: #0000ff;">="round"</span><span style="color: #ff0000;"> stroke-opacity</span><span style="color: #0000ff;">=".571"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#a)"</span><span style="color: #0000ff;">/></</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span>

登入後複製

View Code

把這個SVG儲存到當地資料夾中，命名為filter-test.svg，如果圖示想要換種顏色，很簡單，css加入程式碼：filter:url(filter-test.svg#a)--- ----------------注意：我的這份svg中只有一個id為a的濾鏡。

　　總結下：第一種方式累設計師，圖標圖片會很大,CSS控制麻煩，如果是一個圖集需要計算位移；第二種方式，簡單但是效果有限，比如說打燈光、做漸變等等；第三種方式呢，很優秀，給圖標添加樣式，只需要製作一份svg濾鏡集，然後通過filter應用就可以，佔的資源少，兼容性呢，只要瀏覽器支持svg和filter即可。

　　就這些了，個人覺得最後一種方式漸漸會取代前面，因為它是濾鏡，可以掛到網上復用，實現共享。