svg的基本图形与属性【小尾巴的svg学习笔记1】

因为项目有可能用到, 所以学习了一下，做此笔记，图截自慕课网，侵删。

一、基本图形

　　1、矩形

　　　　

　　　　x，y定义矩形的左上角坐标；

　　　　width，height定义矩形的长度和宽度；

　　　　rx，ry定义矩形的圆角半径长度，这里注意，如果rx给值了ry没给值，ry沿用rx的值，反之同理；

 

　　2、圆形

　　　　

　　　　cx与cy定义圆心的坐标；

　　　　r为圆的半径长度；

 

　　3、椭圆

　　　　

　　　　x，y依旧为圆心的坐标；

　　　　椭圆相较于圆使半径变为两个值，分别为：rx 横向半径和 ry 纵向半径；

　　　　

　　4、直线

　　　　

　　　　这个较为简单，x1，y1为起点坐标，x2，y2为终点坐标

　　5、折线

　　　　

　　　　points：坐标，折线也较为简单，用空格或逗号间隔，依次写下目标点坐标。

　　6、多边形（闭合折线）

　　　　

　　　　points：坐标，基本与第五的折线相同，唯一不同的是多边形会把最后一个点和起点连接起来

二、属性

　　1、fill 填充颜色

　　2、stork 描边颜色

　　3、stork-width 描边粗细

　　4、transform 变形，位移（相较于父亲）等

　　5、opacity 透明度

　　6、 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）

　　7、 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

　　

做得不够详细，下次会进行补充，希望能对大家有一点点帮助。下一个笔记将会描述在代码里的实际应用。