拿QQ圖標來說事
1.將紅色和灰色的QQ圖標放到一個PNG圖片里，通過background-position、
over:hidden來控制圖標的展示。
2.將QQ圖標制作成font字體，通過font-face引用字體，比如QQ圖標對應者字母A，那我可以這樣用：
<span style="font-family: my-font color:red">A</span>
3.使用svg-filter濾鏡對QQ圖片上色，下面是一個svg的濾鏡。
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
<defs> <filter id="a" color-interpolation-filters="sRGB">
<feComposite in2="SourceGraphic" operator="arithmetic" k2="1" result="composite1"/> <feColorMatrix in="composite1" values="1" type="saturate" result="colormatrix1"/> <feFlood flood-opacity="1" flood-color="#3A9E00" result="flood1"/> <feBlend in="flood1" in2="colormatrix1" mode="multiply" result="blend1"/> <feBlend in2="blend1" mode="screen" result="blend2"/> <feColorMatrix in="blend2" values="1" type="saturate" result="colormatrix2"/> <feComposite in="colormatrix2" in2="SourceGraphic" operator="in" result="fbSourceGraphic"/> <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"/> <feComposite in2="fbSourceGraphic" operator="arithmetic" k2="1" result="composite1" in="fbSourceGraphic"/> <feColorMatrix in="composite1" values="1" type="saturate" result="colormatrix1"/> <feFlood flood-opacity="1" flood-color="#3A9E00" result="flood1"/> <feBlend in2="colormatrix1" in="flood1" mode="multiply" result="blend1"/> <feBlend in2="blend1" mode="screen" result="blend2"/> <feColorMatrix in="blend2" values="1" type="saturate" result="colormatrix2"/> <feComposite in2="fbSourceGraphic" in="colormatrix2" operator="in" result="composite2"/> </filter> </defs> <ellipse cx="310.637" cy="460.673" rx="162.715" ry="154.262" transform="matrix(.38065 0 0 .4103 -38.244 -109.02)" fill="#d3d7cf" stroke="#2e3436" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".571" filter="url(#a)"/> </svg>
把這個SVG保存到當?shù)匚募A中，命名為filter-test.svg，如果圖標想要換種顏色，很簡單，
css中加入代碼：filter:url(filter-test.svg#a)---------
注意：我的這份svg中只有一個id為a的濾鏡。
總結下：第一種方式累設計師，圖標圖片會很大,CSS控制麻煩，如果是一個圖集需要計算位移；
第二種方式，簡單但是效果有限，比如說打燈光、做漸變等等；第三種方式呢，很優(yōu)秀，給圖標添加樣式，只需要制作一份svg濾鏡集，
然后通過filter應用就可以，占的資源少，兼容性呢，只要瀏覽器支持svg和filter即可。
就這些了，個人覺得最后一種方式漸漸會取代前面，因為它是濾鏡，可以掛到網上復用，實現(xiàn)共享。
【 微信掃一掃 】
