SVG标签

SVG标签介绍

SVG是 Scalable Vector Graphics 的缩写 意为可缩放矢量图形，SVG文件是纯粹的XML
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失，因此能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接

SVG标签属性

width height

width、height设置用来设置SVG的宽高。

viewBox

viewBox 属性定义了SVG中可以显示的区域。

语法：viewBox=“x y w h” x、y为起始点，w、h为显示区域的宽高。

xmlns和xmlns:xlink

SVG使用XML格式定义图形，SVG文件是纯粹的XML文件。在XML中，标签和属性属于命名空间，这是为了防止来自不同技术的标签和属性发生冲突。例如在SVG中存在a标签，在HTML中也存在a标签，那么怎么区分这个a标签属于哪一种技术，这就需要使用命名空间了。
xmlns用于声明命名空间（namespace），在此声明之下的所有子标签都属于这个空间内。这里看起来是一个url，但实际上仅仅是一个字符串，这样使用只是惯例。
xmlns:xlink 表示前缀为xlink的标签和属性

基本图形

基本图形其实就是我们插入到SVG标签中的元素

circle

circle 标签能在屏幕上绘制一个圆形

语法：

属性：cx、cy为圆的坐标，r为圆的半径

rect

rect标签能在屏幕上绘制一个矩形
语法：

属性：x、y为矩形的起始点坐标，rx、ry为圆角x、y轴方向的半径， width、height为矩形的宽高

ellipse

ellipse标签比circle标签功能更强大，ellipse标签也可以实现圆形的绘制，并且还可以分别缩放圆形的长轴半径和短轴半径，从而达到椭圆的效果。

语法：

属性：cx、cy为椭圆的坐标，rx为椭圆的x轴半径、ry为椭圆的y轴半径

line

line标签可以根据两点的坐标绘制一条直线

语法：

属性：x1、y1为起点的坐标，x2、y2为终点的坐标

polyline

polyline标签可以把很多个点链接在一起成为一条折线。

语法：

属性：points为点集数列，其中每个点都必须包含2个数字，一个是x坐标，一个是y坐标。

polygon

polygon标签和polyline标签类似，都是由很多个点链接在一起的。但不同的是polygon路径中的最后一个点和第一个点是默认闭合的。

语法：

属性：points为点集数列，其中每个点都必须包含2个数字，一个是x坐标，一个是y坐标。

path

path标签是所有图形中最复杂的，但他也是最强大的。在SVG中最常用的图形就是path标签，他可以绘制圆形、椭圆、矩形、线条、折线、多边形、贝塞尔曲线等。

语法：

属性：d为一个点集数列以及其它绘制路径的信息。

示例

<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>
</template>

控制侧栏展开的按钮可以用svg实现

其中:class="{‘is-active’:isActive}"是动态绑定类，isActive为true才使用’is-active’类
@click="toggleClick"是控住展开的开关