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

这篇文章发布于 2014年07月22日,星期二,17:28,归类于 SVG相关。 阅读 163322 次, 今日 11 次 27 条评论

 

一、接上篇

前文介绍了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浏览器下):
IE11浏览器下IE9模式图标填充色继承currentColor截图

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); }

然后小图标的颜色就是渐变了啦!
SVG图标成为渐变色

自然,特定条件下你还可以fill图片,也就是文字遮罩效果。

font-face要实现文字渐变,Chrome可以,FireFox和IE呢?

目前,IE浏览器,包括IE11,貌似CSS中fill不支持url()锚定,但FireFox支持,所以还是比font-face更上一层楼!

六、结束语

更多潜力等待挖掘。

感谢阅读,欢迎多多指正,祝愿没有小手一抖(下图为GIF点击播放-472K)。

奥特曼小手一抖

(本篇完)

分享到:


发表评论(目前27 条评论)

  1. jiawen说道:

    svg 是以 background-image 形式引入的话,currentColor是无效的

  2. aoyama说道:

    请教一下,本地的ai软件制作的svg图标,使用了SVG在线压缩合并工具转换得出,本地ai制作的的svg图标颜色是渐变色,发现用fill无效。

  3. saber酱说道:

    正好想把一些图片换成svg图标,学习一下~

  4. 蔡蔡呀说道:

    没有效果啊老湿

  5. amyees tao说道:

    uikit3 总图标使用了svg的形式,通过:radio改变大小,color改变颜色,也可以自己拓展svg:UIkit.icon.add({}),等等,优雅的解决了外部引用svg带来的问题

  6. Kerry说道:

    如果是 ::after 中的 content 使用了 svg,在 ::after 中定义 fill 就无效了。

  7. 任杰说道:

    我按照文章中说的一点一点做了 可是没有效果 为什么?是需要已纳入什么库吗?

  8. 说道:

    background-image: url(xxx.svg)

    用背景的方式添加的svg如何改变颜色

  9. Web前端之家说道:

    这个讲的还不够详细,大概的东西把

    • 莫弈说道:

      吓人 自己又不写教程 人家写教程了 你还嫌不够详细
      那你何不把你详细的教程发过来给大伙看看

  10. bjhhh说道:

    最近几个月忘了来这里了。
    翻了好多网站,博客,还是zxx这里好东西更多些。 顶个

  11. 乌鸦说道:

    大大,为何SVG图像会遮挡掉点击事件?一直找不出原因啊!

  12. 王子秦说道:

    svg要怎么改版大小啊?

  13. nobody说道:

    font-face还可以继承font-size, svg好像没法办到吧

  14. SJY说道:

    这个仅限于页面内嵌的SVG,
    内嵌的SVG不利于重用。
    如果是作为外部资源引入的呢?