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

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

  • 有6种基本的图形

  

 

 

 

 

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

svg02——svg绘制基本图形,了解常用的属性_第1张图片

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

二、矩形(rect)

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

  • x:距离父级坐标系的 横向坐标值(坐标系的概念后面会提到,先记住父级)
  • y:距离父级坐标系的 纵向坐标值
  • width:矩形 宽度
  • height:矩形 高度
  • rx:横向圆角值
  • ry:纵向圆角值
    svg02——svg绘制基本图形,了解常用的属性_第2张图片

上例子:


  

svg02——svg绘制基本图形,了解常用的属性_第3张图片

三、圆形(circle)

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

svg02——svg绘制基本图形,了解常用的属性_第4张图片
上例子:


  

svg02——svg绘制基本图形,了解常用的属性_第5张图片

四、椭圆(ellipse)

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

svg02——svg绘制基本图形,了解常用的属性_第6张图片
上例子:


    

svg02——svg绘制基本图形,了解常用的属性_第7张图片

五、直线(line)

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

  • x1:第一个点 距离父级坐标系的 横向坐标值
  • y1:第一个点 距离父级坐标系的 纵向坐标值
  • x2:第二个点 距离父级坐标系的 横向坐标值
  • y2:第二个点 距离父级坐标系的 纵向坐标值
    svg02——svg绘制基本图形,了解常用的属性_第8张图片

上例子:


  

svg02——svg绘制基本图形,了解常用的属性_第9张图片

六、多线段(polyline)

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

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

svg02——svg绘制基本图形,了解常用的属性_第10张图片

上例子:


  

svg02——svg绘制基本图形,了解常用的属性_第11张图片

七、多边形(polygon)

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

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

svg02——svg绘制基本图形,了解常用的属性_第12张图片
上例子:


  

svg02——svg绘制基本图形,了解常用的属性_第13张图片

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

你可能感兴趣的