svg之path

svg之path

1.path标签用法：

  给出一个坐标点，在坐标点前添加一个英文字母，表示是如何移动到此坐标点

2.path标签格式：

  1).水平坐标和垂直坐标使用,隔开
  2).多个坐标点之间使用空格
  3).坐标点前添加一个英文字母
  4).水平坐标和垂直坐标之间可以使用,或者空格隔开 但是推荐使用,隔开

3. 英文字母按照功能可分为3大类：

3.1 移动和直线类

   1) M(x,y)+ 将画笔移动到当前点，后面如果有重复参数，会当做L命令处理
   2) L(x,y)+ 绘制直线到指定位置
   3) H(x)+ 绘制水平线到指定的x位置
   4) V(y)+ 绘制竖直线到指定的y位置
   5) m、l、h、v使用相对位置绘制

3.2 贝塞尔曲线类

   1) C三次贝塞尔曲线
   三次贝塞尔曲线有两个中间点三条线段，cubic是三次的，立方的的意思，所以使用C命令来绘制三次贝塞尔曲线

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
  <path d="M30,100 C100,20 190,20 270,100" class="path-class">
  </path>
</svg>

   2) S光滑三次贝塞尔曲线
   S命令可以用来创建与前面一样的贝塞尔曲线，
      (1)但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心(镜像)对称点。只需要输入第二个控制点和结束点，即可绘制光滑三次贝塞尔曲线
      (2)如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
  <path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" class="path-class">
  </path>
</svg>

   3) Q二次贝塞尔曲线
   两次贝塞尔曲线有一个中间点，quadratic是两次的，二次方程式的意思，所以使用Q命令来进行二次贝塞尔曲线绘制。

   <path d="M30,100 Q190,20 270,100" class="path-class">
    </path>

   4) T光滑二次贝塞尔曲线
   与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需要输入终点，即可绘制一个光滑二次贝塞尔曲线

  <svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <path d="M10,100 Q190,20 270,100 T450,100" class="path-class">
    </path>
  </svg>

3.3 弧线命令

   命令语法：Arx,ry.xr,laf,sf,x,y
   属性解释:
      rx: 椭圆x方向的半轴大小。
      ry: 椭圆y方向的半轴大小。
      xr: 椭圆的x轴与水平轴顺时针方向的夹角（一般正圆弧这个夹角都是0度）
      laf: 有两个值(1: 大角度弧线、0: 小角度弧线)
      sf: 有两个值(1: 顺时针至终点、0: 逆时针至终点)
      x: 终点x坐标
      y: 终点y坐标

  SVG的弧线使用A（rx,ry.xr,laf,sf,x,y）命令来完成，原理是通过截取一个椭圆的弧线而得到想要的弧线，

  那么我们首先要构造一个椭圆：使用rx，ry，xr三个参数来构造这个椭圆，rx是椭圆的x半轴长，ry是y半轴长，xr是是弧线所在椭圆的长轴角度。

  其次，我们发现这样构造出来的椭圆其实有两种，而起点到终点的弧线有四种，所以我们需要使用laf、sf、x、y四个参数来选择想要的弧线。laf表示是否选择较长弧，sf表示是否选择逆时针方向那条弧。

  绘制一条弧线实例：

　<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <path d="M100,200 A200 150 0 1 0 250 50" class="path-class">
    </path>
  </svg>
　　

  示例分析：a用了小写英文字母，表示相对坐标，当前画笔位置(100,200)，所以终点位置为(100+150,200-150)即(250,50)。绘制一条弧线 x和y方向半径是200和150 椭圆的x轴和水平轴方向夹角为0°，采用大角度、逆时针方向走向终点。Z表示绘制一条直线将起始点和终点连接起来，封闭图形

  <svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
    <path d="M100,200 a200 150 0 1 0 150 -150 Z" class="path-class">
    </path>
  </svg>

4.闭合类

4.1 Z 后面不跟参数，作用绘制一条直线将起始点和终点连接起来，封闭图形

  上诉命令都是用大写英文字母表示，表示坐标系中的绝对坐标，也可以用小写英文字母，表示的是相对坐标(相对于当前画笔所在点)