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

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=icikhib&title=svg%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%E4%B8%8E%E5%B1%9E%E6%80%A7%E3%80%90%E5%B0%8F%E5%B0%BE%E5%B7%B4%E7%9A%84svg%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B01%E3%80%91

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

一、基本图形

　　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）

　　

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

本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?id=icikhib&title=svg%E7%9A%84%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%E4%B8%8E%E5%B1%9E%E6%80%A7%E3%80%90%E5%B0%8F%E5%B0%BE%E5%B7%B4%E7%9A%84svg%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B01%E3%80%91

转载于:https://my.oschina.net/u/4181724/blog/3093530