SVG图标颜色文字般继承与填充

转自：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更上一层楼！