Maison > Article > interface Web > 图标变色的方法
拿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 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 style="color: #800000;">defs</span><span style="color: #0000ff;">><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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
把这个SVG保存到当地文件夹中,命名为filter-test.svg,如果图标想要换种颜色,很简单,css中加入代码:filter:url(filter-test.svg#a)-------------------注意:我的这份svg中只有一个id为a的滤镜。
总结下:第一种方式累设计师,图标图片会很大,CSS控制麻烦,如果是一个图集需要计算位移;第二种方式,简单但是效果有限,比如说打灯光、做渐变等等;第三种方式呢,很优秀,给图标添加样式,只需要制作一份svg滤镜集,然后通过filter应用就可以,占的资源少,兼容性呢,只要浏览器支持svg和filter即可。
就这些了,个人觉得最后一种方式渐渐会取代前面,因为它是滤镜,可以挂到网上复用,实现共享。