SVG是是用来制作矢量图的HTML5标签，用来定义SVG图形的容器。SVG可以绘制框、圆、路径、图形图像。在使用SVG标签的时候，可以将标签添加到HTML body中，在为它添加对应的css样式。
SVG 是是用来制作矢量图的 HTML5 标签，用来定义 SVG 图形的容器。SVGg 可以绘制框、圆、路径、图形图像。在使用 SVG 标签的时候，可以将标签添加到 html body 中，在为它添加对应的 css 样式。
SVG 是什么
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好 XML 属性，就能获得一致的图像元素。使用 SVG 之前先将标签加入到 HTML body 中。就像其他的 HTML 标签一样，可以为 SVG 标签为之添加 ID 属性。SVG 支持 css,这一点有效的将图形和样式区分开。，例如“border-style:solid;border-width:2px;”。SVG 标签跟其它的 HTML 标签有通用的属性。将 SVG 元素加入到 HTML 代码中，SVG 提供很多绘图形状，例如线条、圆、多边形等。
SVG 的应用
- 绘图
- 动画
SVG 标签用法
SVG 元素可以通过、或者嵌入网页之中，但是我们这里推荐使用,兼容性比较好。
SVG 标签属性
- fill: 填充色 | url(id)这里主要是引用渐变色作为背景
- stroke: 线条的颜色
- stroke-width: 线条的宽度
- stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ，round 和 square 会影响线条的长度
- opacity: 不透明度 0~1
- fill-rule: nonzero (非零环绕原则)evenodd
- stroke-dasharray: 创建虚线数组 x,y,z,… (长度，间隔，长度，间隔，。。。。)
- stroke-dashoffset: 偏移
- filter: url(id) 添加滤镜
clipPath-裁剪
能限制哪些地方可见，哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用 clipPath 元素定义的，属性 clip-path 可用来引用剪切路径。默认情况下，一个形状，其被剪切掉的区域（不可见的区域）是不响应鼠标事件的。
g-分组
g 标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。
