SVG方向：使用SVG绘制不同图形，理解path路径命令以及深刻理解两种fill-rule规则

1、SVG的介绍

SVG是可以在网页中绘制复杂的图形

1.1、svg与canvas画布的区别

计算机中图像的类型分为两种，位图和矢量图。
位图是由像素点组合而成的图像，一个点就是一个像素，每个点都有自己的颜色，位图也与分辨率有直接的联系，分辨率大的位图清晰度高，其放大倍数清晰度也对应的提高，但是，当位图的放大倍数超过最佳分辨率时，就会出现细节丢失，产生锯齿状边缘的情况。
矢量图是通过数学的一种方式，其内容以线条和色块为主，矢量图跟分辨率无关，它可以任意的放大且清晰度不变，也不会有锯齿状边缘。
SVG是矢量图的形式呈现，是根据数学计算得来的，而canvas画布是以位图的形式呈现，其次，SVG是基于XML的，而canvas是基于H5。

2、使用SVG

2.1、创建svg文件

svg是基于XML的，因此需要先创建XML模板文件，然后引入相关的SVG标签进行搭建基本的svg绘图框架

2.2、或直接嵌入到HTML页面中

绘制圆.png

其中cx是圆心点离X轴原点的距离，cy是圆心点离Y轴原点的距离，r是半径，fill是填充的颜色。

绘制圆.png

3、不同图形的不同属性

3.1、圆形()

属性	属性说明
cx	圆心离坐标轴原点x方向的距离
cy	圆心离坐标轴原点y方向的距离
r	半径大小
fill	图片填充的颜色
stroke	外部轮廓的边框
stroke-width	外部轮廓的边框的大小
transparent	图形内部设置透明

透明的带边框的原形.png

3.2、矩形()

属性	属性说明
x	矩形中心点离坐标轴原点x方向的距离
y	矩形中心点离坐标轴原点y方向的距离
width	矩形的宽度
height	矩形的高度
rx	弧度椭圆的x长度
ry	弧度椭圆的y长度
fill	图片填充的颜色
stroke	外部轮廓的边框
stroke-width	外部轮廓的边框的大小
transparent	图形内部设置透明

rx和ry属性解释.png

3.3、椭圆()

属性	属性说明
cx	定义的椭圆中心的x坐标
cy	定义的椭圆中心的y坐标
rx	定义的水平半径
ry	定义的垂直半径
fill	图片填充的颜色
stroke	外部轮廓的边框
stroke-width	外部轮廓的边框的大小
transparent	图形内部设置透明

属性说明png

3.4、线()

属性	属性说明
x1	第一个点离坐标轴原点x方向的距离
y1	第一个点离坐标轴原点y方向的距离
x2	第二个点离坐标轴原点x方向的距离
y2	第二个点离坐标轴原点y方向的距离
stroke	线条的颜色
stroke-width	线条的粗细大小
stroke-opacity	线条设置透明度

线条.png

3.5、折线()

属性	属性说明
points	所有点的集合
fill	不希望起始点连起来有填充颜色的话设置为null
stroke	线条的颜色
stroke-width	线条的粗细大小
stroke-opacity	线条设置透明度

image.png

3.6、多边形()

属性	属性说明
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

最后，图形的代码部分：

3.7、路径()

路径是通过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	无	闭合路径	从结束点绘制一条直线到开始点，闭合路径

路径.png