使用SVG symbols建立图标系统完整指南

2019/7/21 20:27:11 人评论 次浏览 分类:学习教程

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

工作原理

SVG symbols的工作原理:symbol元素用来定义一个图形模板对象,它可以用一个use元素实例化。

symbol元素对图形的作用是在同一文档中多次使用,symbol元素本身是不呈现的。只有symbol元素的实例(亦即,一个引用了symbol的use元素)才能呈现:

                                 

这段代码使用SVG symbols定义了两个图标,每个symbol元素定义一个图标,图标id分别是heart和arrow,将其放在html文件的body元素内。

通过以下代码引用id为heart的图标:

      

xlink:href属性值就是‘#’加symbol的id名称,那么只需改变这个属性值就可以引用不同的图标。

自动化处理

更多内容请查看原文:使用SVG symbols建立图标系统完整指南

上一篇:7月21日周记

下一篇:C++复习笔记

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->