SVG Sprite 简明教程

SVG Sprite

即使你没听过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 来储存信息。

5

Related Posts

Comments : 5

  1. 我觉得我做个大发镜像站肯定很不错,毕竟你是一个写了删删了写的人 :x

    1. @Nopa

      镜像的话我删了不是镜像也没了。。

    2. @bigfa :razz: 他说的镜像应该是copy

    3. @a/s/l?? :oops: 你懂我

  2. 感觉完全不是一个世界的,在电脑这件事上 :sad:

发表留言

Post Comment