使用SVG symbols建立图标系统完整指南
从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。
工作原理
SVG symbols的工作原理:symbol元素用来定义一个图形模板对象,它可以用一个use元素实例化。
symbol元素对图形的作用是在同一文档中多次使用,symbol元素本身是不呈现的。只有symbol元素的实例(亦即,一个引用了symbol的use元素)才能呈现:
<svg>
<symbol viewBox="0 0 24 24" id="heart">
<path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
</path>
</symbol>
<symbol viewBox="0 0 32 32" id="arrow">
<path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
</path>
</symbol>
</svg>
这段代码使用SVG symbols定义了两个图标,每个symbol元素定义一个图标,图标id分别是heart和arrow,将其放在html文件的body元素内。
通过以下代码引用id为heart的图标:
<svg>
<use xlink:href="#heart"/>
</svg>
xlink:href属性值就是‘#’加symbol的id名称,那么只需改变这个属性值就可以引用不同的图标。
自动化处理
更多内容请查看原文:使用SVG symbols建立图标系统完整指南
使用SVG symbols建立图标系统完整指南的更多相关文章
- 使用SVG symbols建立图标系统
在实现Web项目的图标系统时,SVG是一个不错的选择.虽然使用SVG创建图标系统有多种方式.在这篇文章中,我们只看其中一种:SVG symbols.这项技术基于两个元素的使用:<symbol&g ...
- IOS设备设计完整指南
作为初学者,常常不知如何下手设计,IOS应用UI设计中碰到的种种基础小问题,在此都将一一得到解答.这份完整的设计指南将带你快速上手,为IOS设计出优雅的应用吧. 关于此设计指南 此设计指南描述的是如何 ...
- Apache Kafka Connect - 2019完整指南
今天,我们将讨论Apache Kafka Connect.此Kafka Connect文章包含有关Kafka Connector类型的信息,Kafka Connect的功能和限制.此外,我们将了解Ka ...
- 【测试用例工具】TestLink教程:一份完整指南(转)
转自:https://blog.csdn.net/cjtxzg/article/details/80498226 TestLink教程:一份完整指南1 TestLink的优点 登录到TestLink ...
- GOOGLE RANKBRAIN 完整指南
[译]GOOGLE RANKBRAIN 完整指南 ( 2018 最新版 ) 2018.01.29 来源 http://www.zhidaow.com/post/google-rankbrain ...
- XGBoost中参数调整的完整指南(包含Python中的代码)
(搬运)XGBoost中参数调整的完整指南(包含Python中的代码) AARSHAY JAIN, 2016年3月1日 介绍 如果事情不适合预测建模,请使用XGboost.XGBoost算法已 ...
- LG gram 双系统全指南
LG gram 双系统全指南 为了和同学联机玩帝国时代2,以及为了下学期的编程课,五年没用过 Windows 的我决定装 Ubuntu20.04 LTS / WIndows 10 双系统了. 我的 L ...
- DELL R720系统内存指南
该文章摘自于:http://www.dell.com/support/article/cn/zh/cndhs1/SLN153646/zh#issue3,仅供个人作为笔记使用 PowerEdge R72 ...
- Windows重新建立图标缓存
有的时候,快捷方式的图标会因各种优化软件而变得面目全非,这时就需要重新建立图标缓存 新建一个文本文档,把文件的后缀名修改成.bat 的例如 icon.bat 在里面填写下面的内容: rem 关闭exp ...
随机推荐
- 反射:获取枚举类型的Name,Value,Description
[Obsolete("请使用新的方法XXX")] //使用Obsolete特性来告诉使用者这是一个过期的方法 private static void Test() { Type t ...
- Delphi 编写DLL动态链接库文件的知识和样例(有详细步骤,很清楚)
一.DLL动态链接库文件的知识简介: Windows的发展要求允许同时运行的几个程序共享一组函数的单一拷贝.动态链接库就是在这种情况下出现的.动态链接库不用重复编译或链接,一旦装入内存,Dlls函数可 ...
- 国家气象局 天气预报 城市代码(JSON格式)
如题 { "城市代码": [ { "省": "北京", "市": [ { "市名": "北 ...
- Windows 各种计时函数总结(QueryPerformanceCounter可以达到微秒)
本文对Windows平台下常用的计时函数进行总结,包括精度为秒.毫秒.微秒三种精度的5种方法.分为在标准C/C++下的二种time()及clock(),标准C/C++所以使用的time()及clock ...
- top命令的使用
原地址:https://mp.weixin.qq.com/s/DVX86UgZDiTspVe497KKWw
- Android前沿技术
一.热升级Tinker源码解析与手写二.热修复阿里百川Sophix内核原理三.App Instantgoogle8.0 类似热更新技术原理与实战四.强制更新1.银行应用非对称加密对称加密五.组件化框架 ...
- C盘内存杀手:IDEA缓存文件!
软件虽然装在D盘,C盘仍然还有一个文件夹 里面有两个文件夹: config 目录是 IntelliJ IDEA 个性化化配置目录,或者说是整个 IDE 设置目录.也是我个人认为最重要的目录,没有之一, ...
- 【fullGC】内存监控工具
什么是fullGC: 从年轻代空间(包括 Eden 和 Survivor 区域)回收内存被称为 Minor GC,对老年代GC称为Major GC,而Full GC是对整个堆来说的,在最近几个版本的J ...
- Ember报错
错误是ember-data的版本不对 解决办法是: npm install --save ember-data@2.14.2 //bing.com中去查资料,应有尽有
- 设计模式之策略模式和状态模式(strategy pattern & state pattern)
本文来讲解一下两个结构比较相似的行为设计模式:策略模式和状态模式.两者单独的理解和学习都是比较直观简单的,但是实际使用的时候却并不好实践,算是易学难用的设计模式吧.这也是把两者放在一起介绍的原因,经过 ...