转自：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. 支持渐变色（部分）
在CSS中使用fill属性即可，例如：
svg { fill: #369; }所以，一般而言，SVG图标元素上是没有fill属性的，就好像使用font-face的元素一般不会有style="color:#369"这样，都是为了方便CSS控制。
祖先的fill颜色设置SVG后辈元素继承，例如：
body { fill: #369; }则，如果没有其他fill干扰，body标签下的所有SVG图标颜色都是#369.
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图标颜色控制很简单，就跟设置文字一样。
前面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更上一层楼！
