SVG-path路径

发表于 | 分类于 | 阅读次数：
SVG路径详解

一.SVG

二. 路径

  1. path：元素是SVG基本形状中最强大的一个。 你可以用它创建线条, 曲线, 弧形等等。

  2. 他有哪些属性

    1. M(moveto)x y：移动到指定坐标，xy分别为x轴和y轴的坐标点，即画笔的起点

    2. L(lineto)x y: 在初始位置（M 画的起点）和x y确定的坐标画一条线(两点一线)

    3. H(horizontal lineto) x: 沿着x轴移动一段位置 H:向左，h：向右

    4. V(vertical lineto) y: 沿着y轴移动一段位置

    5. C(curveto) x1 y1 x2 y2 x y: 三次贝塞尔曲线 当前点为起点，xy为终点，起点和x1y1控制曲线起始的斜率，终点和x2y2控制结束的斜率。

    6. S(smooth curveto)x2 y2 x y: 简化的贝塞尔曲线

      1. 如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。
      2. 如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点。

    7. Q(quadratic Bézier curve) x1 y1 x y:二次贝塞尔曲线Q 只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。

    8. T(smooth quadratic Bézier curveto):
      Q命令的简写命令。
      与S命令相似，T也会通过前一个控制点，推断出一个新的控制点。
      1.T命令前面必须是一个Q命令，或者是另一个T命令
      2.如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线

    9. A(elliptical Arc)rx,ry x-axis-rotation large-arc-flag sweep-flag x,y:
      rx 弧的半长轴长度
      ry 弧的半短轴长度
      x-axis-rotation 是此段弧所在的x轴与水平方向的夹角，即x轴的逆时针旋转角度，负数 代表顺时针旋转角度。
      large-arc-flag 为1表示大角度弧线，0表示小角度弧线
      sweep-flag 为1表示从起点到终点弧线绕中心顺时针方向，0表示逆时针方向。
      xy 是终点坐标。
    10. Z(closepath):从当前位置到起点画一条直线闭合。
  3. 配套的API
    1. getPointAtLength([number]): 获取path路径的长度 不加参数为总长度 加了参数为当前长度在path（x,y）点上