简介

svg基于xml语言，用于制作html中的矢量图形，矢量图形即缩放的时候不改变图像原来内容，会随着缩放比例放大放小。
基本语法如下：

<svg xmlns='http://www.w3.org/2000/svg'></svg>

属性

除了用如下属性外，还可以通过css样式进行绘制background-color、border改成fill和stroke,不过不是所有属性都能用css设置

名称	描述
x	离左边的距离
y	离上边的距离
width	宽度
height	高度
viewBox	定义画布上显示区域：’0,0,100,100’表示x=0,y=0,width=100,heigh=100
stroke-width	描边宽度
stroke	描边颜色
stroke-opacity	描边不透明度
stroke-linecap	butt square round 描边方式
stroke-linejoin	miter round bevel 秒表线段之间的链接
fill	填充颜色可以为’none’
fill-opacity	填充色不透明度

基本形状

矩形

使用rect标签绘制矩形：

1. x矩形左上角的x位置
2. y矩形左上角的y位置
3. width矩形的宽度
4. height矩形的高度
5. rx圆角的x方位的半径
6. ry圆角的y方位的半径
   代码如下：

   <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

   图形如下：
   

圆形

使用circle标签绘制圆形:

1. r圆的半径
2. cx圆心的x位置
3. cy圆心的y位置
   代码如下：

   <circle cx="25" cy="75" r="20"/>

   图形如下：
   

椭圆

使用ellipse标签绘制椭圆：

1. rx椭圆的x半径
2. ry椭圆的y半径
3. cx椭圆中心的x位置
4. cy椭圆中心的y位置
   代码如下：

   <ellipse cx="75" cy="75" rx="20" ry="5"/>

   图形如下：
   

线条

使用line标签绘制直线

1. x1起点的x位置
2. y1起点的y位置
3. x2终点的x位置
4. y2终点的y位置
   代码如下：

   <line x1="10" x2="50" y1="110" y2="150"/>

折线和多边形

使用polyline标签绘制直线，使用polygon标签绘制多边形

1. points点位集合，每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。
   代码如下：

   <polyline stroke-width='0.5' stroke='brown' fill='none' points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" />
     <polygon stroke-width='1' stroke='brown' points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>

   图形如下：
   

路径

使用path标签控制画笔，此方法可以绘制各种图形，非常常用

1. d填入m h v z c s q t a 控制画笔（大写为值如x，小写为微分如dx）

   直线命令

命令	描述
Mx y	画笔移动到(x,y)的位置(不绘制线)
Lx y	移动到(x,y)的位置(绘制线)
Hx	右绘制水平线，x为像素点长度，-x向左
Vy	下绘制垂直线，y为像素点长度，-y向上
Z	合路径命令
绘制正方形，代码如下：

<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

图形如下：

曲线命令

贝塞尔曲线

命令：C x1 y1,x2 y2,x y
说明：(x，y)是曲线终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点
代码如下：

<path d="M10 10 C 10 30, 120 30, 120 10" stroke="black" fill="transparent"/>

图形如下：