1、SVG的介绍
SVG是可以在网页中绘制复杂的图形
1.1、svg与canvas画布的区别
计算机中图像的类型分为两种，位图和矢量图。
位图是由像素点组合而成的图像，一个点就是一个像素，每个点都有自己的颜色，位图也与分辨率有直接的联系，分辨率大的位图清晰度高，其放大倍数清晰度也对应的提高，但是，当位图的放大倍数超过最佳分辨率时，就会出现细节丢失，产生锯齿状边缘的情况。
矢量图是通过数学的一种方式，其内容以线条和色块为主，矢量图跟分辨率无关，它可以任意的放大且清晰度不变，也不会有锯齿状边缘。
SVG是矢量图的形式呈现，是根据数学计算得来的，而canvas画布是以位图的形式呈现，其次，SVG是基于XML的，而canvas是基于H5。
2、使用SVG
2.1、创建svg文件
svg是基于XML的，因此需要先创建XML模板文件，然后引入相关的SVG标签进行搭建基本的svg绘图框架
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
</svg>
2.2、或直接嵌入到HTML页面中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx='100' cy='100' r='70' fill='green'>
</circle>
</svg>
</body>
</html>
绘制圆.png
其中cx是圆心点离X轴原点的距离，cy是圆心点离Y轴原点的距离，r是半径，fill是填充的颜色。
绘制圆.png
3、不同图形的不同属性
3.1、圆形(<circle></circle>)
| 属性 | 属性说明 |
|---|---|
| cx | 圆心离坐标轴原点x方向的距离 |
| cy | 圆心离坐标轴原点y方向的距离 |
| r | 半径大小 |
| fill | 图片填充的颜色 |
| stroke | 外部轮廓的边框 |
| stroke-width | 外部轮廓的边框的大小 |
| transparent | 图形内部设置透明 |
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx='100' cy='100' r='70' stroke='red' fill='transparent' stroke-width='5'>
</circle>
</svg>
透明的带边框的原形.png
3.2、矩形(<rect></rect>)
| 属性 | 属性说明 |
|---|---|
| x | 矩形中心点离坐标轴原点x方向的距离 |
| y | 矩形中心点离坐标轴原点y方向的距离 |
| width | 矩形的宽度 |
| height | 矩形的高度 |
| rx | 弧度椭圆的x长度 |
| ry | 弧度椭圆的y长度 |
| fill | 图片填充的颜色 |
| stroke | 外部轮廓的边框 |
| stroke-width | 外部轮廓的边框的大小 |
| transparent | 图形内部设置透明 |
<rect width="300" height="100" x='100' y='100' fill='transparent' rx='40' ry='30' stroke='red' stroke-width='5'>
</rect>
rx和ry属性解释.png
3.3、椭圆(<ellipse></ellipse>)
| 属性 | 属性说明 |
|---|---|
| cx | 定义的椭圆中心的x坐标 |
| cy | 定义的椭圆中心的y坐标 |
| rx | 定义的水平半径 |
| ry | 定义的垂直半径 |
| fill | 图片填充的颜色 |
| stroke | 外部轮廓的边框 |
| stroke-width | 外部轮廓的边框的大小 |
| transparent | 图形内部设置透明 |
<ellipse cx='200' cy='100' rx='100' ry='35' fill='transparent' stroke='red' stroke-width='5' >
</ellipse>
属性说明png
3.4、线(<line></line>)
| 属性 | 属性说明 |
|---|---|
| x1 | 第一个点离坐标轴原点x方向的距离 |
| y1 | 第一个点离坐标轴原点y方向的距离 |
| x2 | 第二个点离坐标轴原点x方向的距离 |
| y2 | 第二个点离坐标轴原点y方向的距离 |
| stroke | 线条的颜色 |
| stroke-width | 线条的粗细大小 |
| stroke-opacity | 线条设置透明度 |
<line x1='10' y1='10' x2='100' y2='50' stroke='#000' stroke-width='5' stroke-opacity='0.5'>
</line>
线条.png
3.5、折线(<polyline></polyline>)
| 属性 | 属性说明 |
|---|---|
| points | 所有点的集合 |
| fill | 不希望起始点连起来有填充颜色的话设置为null |
| stroke | 线条的颜色 |
| stroke-width | 线条的粗细大小 |
| stroke-opacity | 线条设置透明度 |
<polyline points='50,50 100,50 100,100 150,100 150,150 200,150 200,200 250,200' fill='none' stroke='red' stroke-width='5' >
</polyline>
image.png
3.6、多边形(<polygon></polygon>)
| 属性 | 属性说明 |
|---|---|
| points | 所有点的集合 |
| fill | 设置为lime |
| stroke | 线条的颜色 |
| stroke-width | 线条的粗细大小 |
| stroke-opacity | 线条设置透明度 |
| fill-rule | 填充规则 |
fill-rule 属性提供两种选项用于指定如何判断图形的“内部”
- nonzero：起始值为0，射线会和路径相交，如果路径方向和射线方向形成的是顺时针方向则+1，如果是逆时针方向则-1，最后如果数值为0，则是路径的外部；如果不是0，则是路径的内部。
- evenodd：起始值为0，射线会和路径相交，每交叉一条路径，我们计数就+1，最后看我们的总计算数值，如果是奇数，则认为是路径内部，如果是偶数，则认为是路径外部。
深刻理解两种规则：
-
nonzero判定原理
nonzero内部.png
nonzero外部.png -
evenodd判定原理
evenodd内部.png
evenodd外部.png
最后，图形的代码部分：
<polygon points='50,50 500,50 300,200 50,50 50,100 200,50' fill='lime' stroke='red' fill-rule='evenodd' stroke-width='5' >
</polygon>
3.7、路径(<path></path>)
路径是通过d属性绘制而成的，d属性的第一个命令必须是移动命令(即M)
小写的命令的话描述与大写字母一致，只是使用的坐标是相对坐标。
| 指令 | 参数 | 名称 | 描述 |
|---|---|---|---|
| M | x,y | moveto | 移动到 移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制 |
| L | x,y | lineto | 连直线到 从当前画笔所在位置绘制一条直线到指定的（x,y）坐标 |
| H | x | horizontal lineto | 水平连线到 绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标 |
| V | y | vertical lineto | 垂直连线到 从当前位置绘制一条垂直直线到参数指定的y坐标 |
| C | x1,y1 x2,y2 x,y | curveto | 三次方贝塞尔曲线 从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度 |
| S | x2,y2 x,y | shorthand / 平滑三次方贝塞尔曲线 | 从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同 |
| Q | x1,y1 x,y | 二次方贝塞尔曲线 | 从当前画笔位置绘制一条二次方贝塞尔曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度 |
| T | x,y | 平滑的二次贝塞尔曲线 | 从当前画笔位置绘制一条二次贝塞尔曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点 |
| A | rx,ry x-axis-rotation large-arc-flag,sweepflag x,y | 椭圆弧线 | 从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向 |
| Z | 无 | 闭合路径 | 从结束点绘制一条直线到开始点，闭合路径 |
<path id="line1" d="M 100 150 l 150 300" stroke="red" stroke-width="3" fill="none" />
<path id="line2" d="M 250 450 l 150 -300" stroke="red" stroke-width="3" fill="none" />
<path d="M 100 150 q 150 300 300 0" stroke="blue" stroke-width="5" fill="none" />
路径.png
