在vue中使用SVG建立图标系统并且使用

2019-02-26  本文已影响0人  super静_jingjing

首先我们先来学一下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>标签

标签用于制路径

<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>标签

用来对元素进行分组；它不会被直接显示，大概相当于定义一个模板，然后使用<use>元素引用并进行渲染。

<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、因为svg是对图象的路径进行描述，实际项目中的图标都是比较复杂的，很少是标准的圆形矩形等，这个时候我们就需要path标签来描述图象。实际的图象的path我们自己去算是很复杂耗时的，我们可以让设计帮我们生成svg文件获得找到path。
阿里的iconfont更方便一点，下载一个图标，然后去js文件把css和html复制出来用就ok了


image.png

2.获得了path之后 我们需要确定图标系统的架构。
上面确定了以下的基本结构

<svg>
   <path></path>
</svg>
  1. 但是我们实际项目中图标系统里图标是单独个体，也就是说图标和图标之后是分离的，这个时候我们就想到了<symbol>，结构变化成如下
<svg>
   <symbol>
       <path></path>
   </symbol>
</svg>
  1. 图标也可能是不同的标签进行组合，就比如是tab标签，那就想到了g标签，结构变化成如下
<svg>
   <symbol>
       <path></path>
   </symbol>
  <symbol>
       <g>
            <line></line>
            <circle></circle>
            ......
       </g>
   </symbol>
</svg>
  1. 到这里基本的一个图标系统已经建立好了，贴出一个完整的代码
<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隐藏即可解决这个问题。

  1. 使用
    在项目入口导入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>
上一篇 下一篇

猜你喜欢

热点阅读