svg02——svg绘制基本图形，了解常用的属性

一、基本图形标签、通用属性

• 有6种基本的图形

• 还有一些通用的属性，比如 fill（填充）、stroke（边框）、transform（变换）
  （ transform就是 css3 中的用法 ）

然后一起学习下各个图形的属性用法

二、矩形（rect）

重要的是，在svg坐标系中，x轴正方向 向右 ，y轴正方向 向下

• x：距离父级坐标系的 横向坐标值（坐标系的概念后面会提到，先记住父级）
• y：距离父级坐标系的 纵向坐标值
• width：矩形 宽度
• height：矩形 高度
• rx：横向 的 圆角值
• ry：纵向 的 圆角值
  

上例子：

三、圆形（circle）

• cx：圆心 距离父级坐标系的 横向坐标值
• cy：圆心 距离父级坐标系的 纵向坐标值
• r：半径

上例子：

四、椭圆（ellipse）

• cx：圆心 距离父级坐标系的 横向坐标值
• cy：圆心 距离父级坐标系的 纵向坐标值
• rx：水平半径
• ry：垂直半径

上例子：

五、直线（line）

这个定义就很简单了，数学上两个点的坐标

• x1：第一个点 距离父级坐标系的 横向坐标值
• y1：第一个点 距离父级坐标系的 纵向坐标值
• x2：第二个点 距离父级坐标系的 横向坐标值
• y2：第二个点 距离父级坐标系的 纵向坐标值
  

上例子：

六、多线段（polyline）

points ：多个坐标点的位置集合，傻瓜式写坐标就行，以此类推

• x1：第一个点 距离父级坐标系的 横向坐标值
• y1：第一个点 距离父级坐标系的 纵向坐标值
• x2：第二个点 距离父级坐标系的 横向坐标值
• y2：第二个点 距离父级坐标系的 纵向坐标值
  ... ... ...

上例子：

七、多边形（polygon）

points ：与多线段类似，区别是 最后一个点 会和 第一个点 连起来，形成封闭图形

• x1：第一个点 距离父级坐标系的 横向坐标值
• y1：第一个点 距离父级坐标系的 纵向坐标值
• x2：第二个点 距离父级坐标系的 横向坐标值
• y2：第二个点 距离父级坐标系的 纵向坐标值
  ... ... ...

上例子：

以上就是基础图形的绘制，嗯，学会基本画图了~