转自:http://www.zhangxinxu.com/wordpress/?p=4286
一、接上篇
前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG Sprites比font-face高几层楼的事实(看看外国同行的对比)。但是呢,人总是这样,总是容不得说自己现在使用东西的不好。于是乎,不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳:SVG图标颜色要内联设置,不像font-face
那样好控制!而且还不只一位兄弟这么说。
心中默念三遍,切勿浮躁,切勿浮躁,切勿浮躁。其实呢,我并不忍心说实话的:SVG图标颜色控制要比font-face
有过之而无不及。
以下是颜色相关特点(不包括图片填充,滤镜什么的):
1. CSS可控制
2. 颜色可继承
3. 支持当前色currentColor
4. 支持渐变色(部分)
二、SVG内联图标颜色CSS可控制
在CSS中使用fill
属性即可,例如:
svg { fill: #369; }
所以,一般而言,SVG图标元素上是没有fill
属性的,就好像使用font-face
的元素一般不会有style="color:#369"
这样,都是为了方便CSS控制。
三、SVG内联图标颜色可继承
祖先的fill颜色设置SVG后辈元素继承,例如:
body { fill: #369; }
则,如果没有其他fill
干扰,body
标签下的所有SVG图标颜色都是#369
.
四、SVG内联图标支持当前色currentColor
currentColor
就是使用当前该元素所处环境的文字颜色,例如:
li { color: #369; } li > svg { fill: currentColor; }
这里的currentColor就是#369
也就是当前SVG平级的文字的颜色。一例胜前言,
您可以狠狠地点击这里:SVG Sprites图标与文字填充currentColor demo
demo页面的HTML结构是:
<ul> <li> <svg> <li> <svg> <li> <svg> </ul>
其中,颜色方面:
li { color: #369; } svg { fill: currentColor; }
也就是li
设置颜色,svg使用当前色currentColor
, 于是乎,我们会看到demo中,SVG图标和文字都是一样的颜色#369
, 见下截图(IE9浏览器下):
currentColor
就是当前色,比方说SVG和文字都在a
标签里面,则图标就是链接色,很方便的来,就像是普通文字一样,使用起来与font-face
无异,很方便。
为了让大家进一步感受下这个世界的善意,demo中还有颜色可设置的操作,见下图:
更改颜色会改变上面对应序号li
元素的颜色,例如,我们选几个华丽的web色,然后:
总而言之,言而总之,SVG图标颜色控制很简单,就跟设置文字一样。
五、SVG内联图标支持渐变色
前面3个点都是跟font-face
平起平坐的,这里这个就是超过font-face
的地方。
CSS中的fill
属性,不仅可以跟随颜色值,还能是页面上的SVG元素,自然,也是可以是渐变元素。
例如,页面上有下图所示的(IE9+可见)SVG元素(线性渐变):
我们只需要页面上存在如下的SVG代码:
<svg width="0" height="0">
<defs>
<linearGradient x1="0" y1="0" x2="1" y2="1" id="lineGradient">
<stop offset="0%" stop-color="#000000">
</linearGradient>
</defs>
</svg>
然后,CSS方面:
svg { fill: url(#lineGradient); }
然后小图标的颜色就是渐变了啦!
自然,特定条件下你还可以fill
图片,也就是文字遮罩效果。
而font-face
要实现文字渐变,Chrome可以,FireFox和IE呢?
目前,IE浏览器,包括IE11,貌似CSS中fill
不支持url()
锚定,但FireFox支持,所以还是比font-face
更上一层楼!