前言
<svg> 标签用于声明一个 SVG 文档片段，它内置许多标签帮助开发者绘制图形
目录
0、基本介绍
1、创建容器
2、图形标签
3、功能标签
正文
0、基本介绍
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）
它的本质其实就是对图片进行描述的文本，因此无论我们将图片放大多少倍都不会失真
使用 SVG 的方式有很多，以下是最常见的几种：
- 将 SVG 代码直接插入 HTML
- 将 SVG 代码保存为一个文件，在 HTML 中通过标签引入
- 将 SVG 代码保存为一个文件，在 CSS 中作为资源引入
1、创建容器
<svg> 标签可以声明一个 SVG 文档片段，如果不指定属性 width、height，那么默认宽高为 300*150
<!DOCTYPE html> <html> <head> <title>SVG Demo</title> </head> <body> <svg id="graph" width="300px" height="300px"></svg> </body> </html>
2、图形标签
在容器中，预定义有一些图形标签，方便开发者用于绘制图形
（0）通用属性
这些图形标签有一些通用的属性，用于控制图形的样式
fill：设置图形内部的颜色fill-opacity：设置内部颜色的不透明度stroke：设置图形边框的颜色stroke-width：设置图形边框的宽度stroke-opacity：设置边框颜色的不透明度
（1）矩形
使用 <rect> 标签可以绘制矩形，该标签常用的属性如下：
x：矩形左上角 X 轴坐标y：矩形左上角 Y 轴坐标width：矩形宽度height：矩形高度rx：X 轴方位的圆角半径ry：Y 轴方位的圆角半径
<svg id="graph" width="300px" height="300px"> <rect x="100" y="100" width="100" height="100" /> </svg>
（2）圆形
使用 <circle> 标签可以绘制圆形，该标签常用的属性如下：
cx：圆心 X 轴坐标cy：圆心 Y 轴坐标r：半径
<svg id="graph" width="300px" height="300px"> <circle cx="150" cy="150" r="100" /> </svg>
（3）椭圆
使用 <ellipse> 标签可以绘制椭圆，该标签常用的属性如下：
- cx：椭圆中心 X 轴坐标
- cy：椭圆中心 Y 轴坐标
- rx：水平半径
- ry：垂直半径
<svg id="graph" width="300px" height="300px"> <ellipse cx="150" cy="150" rx="100" ry="50" /> </svg>
（4）线段
使用 <line> 标签可以绘制线段，该标签常用的属性如下：
x1：线段起点 X 轴坐标y1：线段起点 Y 轴坐标x2：线段终点 X 轴坐标y2：线段终点 Y 轴坐标
（5）折线
折线其实就是由一条条线段连接而成，使用 <polyline> 标签可以绘制折线，常用的属性如下：
points：定义一组节点，每个节点包含两个数字，分别代表这个点的 X、Y 坐标
<svg id="graph" width="300px" height="300px"> <polyline points="150 100,100 200,200 200" fill="none" stroke="black" /> </svg>
（6）多边形
和折线类似，区别在于多边形最后会自动闭合，使用 <polygon> 标签可以绘制多边形，常用的属性如下：
points：定义一组节点，每个节点包含两个数字，分别代表这个点的 X、Y 坐标
<svg id="graph" width="300px" height="300px"> <polygon points="150 100,100 200,200 200" fill="none" stroke="black" /> </svg>
（7）路径
路径可以用于绘制任何图形，使用 <path> 标签可以绘制路径，它通过属性 d 定义绘制的顺序
实际上它的值表示一组绘制命令，通过简写的字母表示动作，后面跟着必要的参数，常见的命令如下：
只移动不绘制
- M x y：将当前点移动到 (x, y)
绘制直线
- L x y：从当前点到 (x, y) 画一条直线
- H x：从当前点水平移动 x 像素画直线，若 x 为正数，则沿着 X 轴正方向移动，反之则沿着负方向移动
- V y：从当前点垂直移动 y 像素画直线，若 y 为正数，则沿着 Y 轴正方向移动，反之则沿着负方向移动
- Z：从当前点到起始点画一条直线，它的作用相当于闭合路径
绘制曲线
A rx ry x-axis-rotation large-arc-flag sweep-flag x y：绘制弧形
rx 表示椭圆 X 轴半径，ry 表示椭圆 Y 轴半径，x-axis-rotation 表示相对于坐标轴的旋转角度
对于 large-arc-flag，若值为 0，表示绘制小弧部分，若值为 1，表示绘制大弧部分
对于 sweep-flag，若值为 0，表示逆时针绘制，若值为 1，表示顺时针绘制
x 表示圆弧终点 X 轴坐标，y 表示圆弧终点 Y 轴坐标
Q cx cy x y：绘制二次贝塞尔曲线
(cx, cy) 表示控制点的坐标，(x, y) 表示结束点的坐标
T x y：绘制二次贝塞尔曲线的简写命令
如果该命令前面是 Q 或者 T 命令，则它的控制点就是上一个控制点关于上一个终点的对称点
如果该命令单独使用，那么它的控制点和终点是同一个点
C cx1 cy1 cx2 cy2 x y：绘制三次贝塞尔曲线
(cx1, cy1) 表示第一个控制点坐标，(cx2, cy2) 表示第二个控制点坐标，(x, y) 表示结束点的坐标
S cx2 cy2 x y：绘制三次贝塞尔曲线的简写命令
如果该命令前面是 C 或者 S 命令，则它的第一个控制点就是上一个控制点关于上一个终点的对称点
如果该命令单独使用，那么它的第一个控制点和第二个控制点是同一个点
<svg id="graph" width="300px" height="300px"> <path d="M 150 150 L 250 150 A 100 100 0 0 0 50 150" fill="none" stroke="black" /> </svg>
（8）文本
使用 <text> 标签可以绘制文本，该标签常用的属性如下：
x：表示文本区域基线起点 X 轴坐标y：表示文本区域基线起点 Y 轴坐标
<svg id="graph" width="300px" height="300px"> <text x="50" y="50">Hello World</text> </svg>
