svg 适合描述一些简单的图形
下面来画第一个图形
svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。
svg 提供一些标签来表达常用的基本图形，如 <circle/><rect/><ellipse/><line/><polygon/><polyline/><path/>，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。
表达图形的具体属性不作介绍，请自行查阅资料。
有些属性可以放在CSS中：
有些则只能写在标签里，如下：
path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。
有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。
上文中的示例： 链接
SVG教程 | MDN
SVG 教程 | 菜鸟教程
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容：[removed] import '@/icons' export default {name: 'svg-icon',props: { iconClass: {type: String,required: true }, className: {type: String }},computed: { iconName() {return `#icon-${this.iconClass}` }, svgClass() {if (this.className) { console.log('svg-icon ' + this.className) return 'svg-icon ' + this.className} else { return 'svg-icon'} }},mounted: function() {} }[removed]style .svg-icon {width: 1em height: 1em vertical-align: -0.15em fill: currentColor overflow: hidden }创建index.js文件文件内容如下：import Vue from 'vue'import svgiconfont from '@/components/svgiconfont'// svg组件/*require.context有三个参数：directory：说明需要检索的目录useSubdirectories：是否检索子目录regExp: 匹配文件的正则表达式 */// 全局注册Vue.component('svg-icon', svgiconfont)const requireAll = requireContext =>requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)requireAll(req)在main.js引入icons文件夹下即添加import ‘@/icons’修改webpack.base.conf.js添加代码：{test: /\.svg$/,loader: "svg-sprite-loader",include: [resolve("src/icons")],options: { symbolId: "icon-[name]"} }, {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve("src/icons")],options: { limit: 50000, name: utils.assetsPath('img/[name].[hash:7].[ext]')} }使用方法在页面中添加svg即
scalable
vector
graphics，是一种用来绘制矢量图的
html5
标签。你只需定义好xml属性，就能获得一致的图像元素。
使用svg之前先将标签加入到html
body中。就像其他的html标签一样，你可以为svg标签为之添加id属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。svg标签跟其它的html标签有通用的属性。你可以用height="100px"
width="200px"
为其添加高度和宽度。
现在就将svg元素加入到我们html代码中，svg提供很多绘图形状，例如线条、圆、多边形等。
svg线条：
svg线条用标签定义，在此标签内你还可以定义其他的属性。
该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:green”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
svg画圆：
svg提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为mycircle。为了定义圆的中心以及半径，使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219e3e"为圆填充颜色。同样你可以用stroke="#17301d"
stroke-width="2"定义圆周线条颜色和宽度。
svg矩形:
同样的使用标签来画矩形，我们同样设置了
id
属性
“myrectangle”
,用
width="300"
height="100"
定义高宽，使用
fills
属性定义填充颜色。用
strock
定义边框。还有一点需要注意，我用
fill-opacity="0.5"
stroke-opacity="0.5"
为
stroke
和
filling
都添加了透明度。
svg椭圆：
我们同样是用标签来绘制椭圆。设置其
id="myellipse"
，给定起中心坐标
cx="120"cy="60"，长轴短轴半径
rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3f5208stroke:blackstroke-width:3"。
svg多边形：
我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如
points="10,10
75,150
150,60"
，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用
style="fill:#63bcf7stroke:blackstroke-width:3"
定义多边形填充颜色、边框以及边框宽度。
