即使你没听过SVG Sprite,那么image sprite 你一定知道了,就是我们常说的精灵图。图标图形整合在一起,实际呈现的时候准确显示特定图标。
image sprite 是通过background-image 和坐标来实现的,svg sprite则是通过symbol和use来实现的。
介绍这个东西也是有一定的原因的,在最新版本的windows的Edge 下,字体图标是无法显示的,原因是windows的安全性策略,我自己不用windows,所以具体版本就不清楚了。
使用方法也比较简单,把所有的SVG图标都在一个SVG源上,然后用id调用就可以了。
参考代码
<svg viewBox="0 0 100 100"> <use xlink:href="#icon-1"></use> </svg>
use元素是通过xlink:href属性,寻找要使用的元素的。#icon-1对应的就是id为icon-1的元素。
那么问题来了,如何制作SVG源,这里推荐使用icomoon.io 这个网站,可以直接到处svg。
可以设置默认的图标大小
下载解压后得到如下文件
里面有示例代码,最后的symbol-defs.svg就是我们需要的源文件。可以把里面的内容直接复制到body标签里。同时也支持外链,但要注意同源问题。将文件上传到指定路径,然后使用下面的代码调用。
<svg viewBox="0 0 100 100"> <use xlink:href="symbol-defs.svg#icon-1"></use> </svg>
xlink:href="symbol-defs.svg#icon-1"
是对应文件路径。外链的话IE是不支持的,Edge 没有问题。
svg 和字体图标一样,也是可以通过css来控制的,完美。
另外因为SVG是纯正的字符串,所以可以使用localstorage
来储存信息。
我觉得我做个大发镜像站肯定很不错,毕竟你是一个写了删删了写的人
@Nopa
镜像的话我删了不是镜像也没了。。
@bigfa
他说的镜像应该是copy
@a/s/l??
你懂我
感觉完全不是一个世界的,在电脑这件事上