在 vue 中使用 SVG 建立图标系统并且使用
首先我们先来学一下 svg 标签的基础知识,参考了阮一峰大神的网络日志,链接:http://www.ruanyifeng.com/blog/2018/08/svg.htmlSVG 全称是可缩放矢量图,其他图像格式是基于像素处理,svg 是属于对图像的形状描述,所以 svg 本质上是文本文件,体积较小,且不管放大多少倍都不会失真。svg 和其他标签一样,可以直接插入到 html 中使用,然后通过 c
首先我们先来学一下 svg 标签的基础知识,参考了阮一峰大神的网络日志,链接:http://www.ruanyifeng.com/blog/2018/08/svg.html
SVG 全称是可缩放矢量图,其他图像格式是基于像素处理,svg 是属于对图像的形状描述,所以 svg 本质上是文本文件,体积较小,且不管放大多少倍都不会失真。
svg 和其他标签一样,可以直接插入到 html 中使用,然后通过 css、js 对其进行其他操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg id="mysvg" viewBox="0 0 800 600">
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
</body>
</html>
svg 语法
<svg>
标签
SVG 代码都放在顶层标签<svg>
之中。如:
<svg id="mysvg" viewBox="0 0 800 600">
<circle id="mycircle" cx="400" cy="300" r="50" />
</svg>
SVG 属性
width
和height
指定元素的宽度和高度,如果不指定默认大小是 300 像素(宽) x 150 像素(高)viewBox
属性有4个值,分别是左上角的横坐标和纵坐标、视口的宽度和高度
SVG 的 CSS 属性与网页元素有所不同
fill
:填充色stroke
:描边色stroke-width
:边框宽度
以下会列举在建立图标系统可能会用到的标签,其他标签可以去看http://www.ruanyifeng.com/blog/2018/08/svg.html
<path>
标签
path
是用来定义形状的通用元素,所有的基本形状都可以用 path
来创建。
<svg width="300" height="180">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"></path>
</svg>
d
属性表示绘制顺序
M
:移动到(moveto)L
:画直线到(lineto)Z
:闭合路径
<use>
标签
复制标签进行引用并渲染
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
href
属性指定所要复制的节点,x
属性和 y
属性是 <use>
左上角的坐标。
<g>
标签
用于将多个形状组成一个组(group)
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<defs>
标签
用于自定义形状,它内部的代码不会显示,仅供引用
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<symbol>
标签
用来对元素进行分组;它不会被直接显示,大概相当于定义一个模板,然后使用
<svg style="display: none;">
<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>
</svg>
<svg>
<use xlink:href="#heart"/>
</svg>
以上回顾了 svg 的基本知识,那么我们现在来思考一下怎么来做一个图标库
1、获取 path
因为 svg 是对图象的路径进行描述,实际项目中的图标都是比较复杂的,很少是标准的圆形矩形等,这个时候我们就需要 path
标签来描述图象。实际的图象的 path
我们自己去算是很复杂耗时的,我们可以让设计帮我们生成 svg 文件获得找到 path
。
阿里的 iconfont 更方便一点,下载一个图标,然后去 js 文件把 css 和 html 复制出来用就 OK 了
2、确定图标系统的架构
获得了 path
之后 我们需要确定图标系统的架构,上面确定了以下的基本结构。
<svg>
<path></path>
</svg>
3、变化一
但是我们实际项目中图标系统里图标是单独个体,也就是说图标和图标之后是分离的,这个时候我们就想到了 <symbol>
,结构变化成如下
<svg>
<symbol>
<path></path>
</symbol>
</svg>
4、变化二
图标也可能是不同的标签进行组合,就比如是 tab
标签,那就想到了 g
标签,结构变化成如下
<svg>
<symbol>
<path></path>
</symbol>
<symbol>
<g>
<line></line>
<circle></circle>
......
</g>
</symbol>
</svg>
5、完成
到这里基本的一个图标系统已经建立好了,贴出一个完整的代码
<template>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="position:absolute;width:0;height:0;visibility:hidden">
<symbol viewBox="0 0 28 33" id="user">
<path fill-rule="evenodd" d="" class="path1"></path>
</symbol>
<symbol viewBox="0 0 28 33" id="location">
<g fill-rule="evenodd">
<path d="" class="path1"></path>
<path d="" class="path2"></path>
</g>
</symbol>
<symbol id="star" viewBox="0 0 32 32">
<path class="path1" d=""></path>
</symbol>
<symbol viewBox="0 0 32 32" id="backtop">
<g fill-rule="evenodd">
<circle cx="16" cy="16" r="15" stroke="#999"
stroke-width="0.6" fill="none"/>
<line x1="16" y1="10" x2="16" y2="21"
style="stroke:#999;stroke-width:0.8"/>
<line x1="10" y1="10" x2="22" y2="10"
style="stroke:#999;stroke-width:0.8"/>
<path d="M9.5 18 L16 10 L22.5 18"
style="stroke:#999;stroke-width:0.8;fill:none"/>
<text x="10" y="27" style="font-size:6px;fill:#999;
font-weight:700;">顶部</text>
</g>
</symbol>
<symbol viewBox="0 0 33 32" id="default">
<path fill="#3b87c8" d=""></path>
</symbol>
<symbol viewBox="0 0 32 32" id="distance">
<path fill="#2a9bd3" d=""></path>
<path fill="#2a9bd3" d=""></path>
</symbol>
<symbol viewBox="0 0 32 32" id="price">
<path fill="#e6b61a" d=""></path>
</symbol>
<symbol viewBox="0 0 33 32" id="rating">
<path fill="#eba53b" d=""></path>
</symbol>
</svg>
</template>
<script>
export default {
}
</script>
<style lang="scss">
</style>
为什么 svg 还要 hidden,因为 symbol
只是不会显示,但是还是会占用空间,页面上会显示一大块空白。把 svg 隐藏即可解决这个问题。
6、使用
在项目入口导入 svg 图标库,然后在后面的页面中使用 use
引用图标渲染
// App.vue
<svg-icon></svg-icon>
import svgIcon from './components/common/svg';
export default {
components:{
svgIcon
},
}
在需要使用图标的地方:
<svg class="arrow_right">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#price"></use>
</svg>
转载自 简书 super静_jingjing 的文章 在 vue 中使用 SVG 建立图标系统并且使用
更多推荐
所有评论(0)