图标变色的方法

拿QQ图标来说事

1.将红色和灰色的QQ图标放到一个PNG图片里，通过background-position、over:hidden来控制图标的展示。

2.将QQ图标制作成font字体，通过font-face引用字体，比如QQ图标对应者字母A，那我可以这样用： A

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  >  

查看更多关于图标变色的方法的详细内容...