SVG Path（一）基础概念

• Path 由命令及其参数组组成的字符串

  

• Path 写法：

  

• 常用命令汇总

  命令	含义
  M/m(x,y)+	移动到当前位置
  L/l(x,y)+	从当前位置绘制 线段 到 指定位置
  H/h(x)+	从当前位置绘制 水平线 到 指定的 x 位置
  V/v(y)+	从当前位置绘制 竖直线 到 指定的 y 位置
  Z/z	闭合当前路径
  C/c(x1,y1,x2,y2,x,y)+	从当前位置绘制 三次贝塞尔曲线 到 指定位置
  S/s(x2,y2,x,y)+	从当前位置 光滑 绘制 三次贝塞尔曲线 到 指定位置
  Q/q(x1,y1,x,y)+	从当前位置绘制 二次贝塞尔曲线 到 指定位置
  T/t(x,y)+	从当前位置 光滑 绘制 二次贝塞尔曲线 到 指定位置
  A/a(rx,ry,xr,laf,sf,x,y)	从当前位置绘制 弧线 到 指定位置

• 命令使用规则：

  • 区分大小写：大写表示坐标参数为绝对位置，小写则为相对位置。

    绝对位置 与 相对位置 是什么概念？

    比如：横向移动从 x 10 移动到 x 200

    相对位置：结束点的 x 位置值为 210

    绝对位置：结束点的 x 位置值为 200

     <!-- 相对位置 -->
     <path d="M 10 10 h 200" stroke="blue" />
     <!-- 相对位置 -->
     <path d="M 20 20 h 200" stroke="blue" />
     <!-- 绝对位置 -->
     <path d="M 10 30 H 200" stroke="red" />
     <!-- 绝对位置 -->
     <path d="M 20 40 H 200" stroke="red" />
    

  

  • 最后的参数表示最终要到达的位置。

  • 上一个命令结束的位置就是下一个命令开始的位置。

  • 命令可以重复参数，表示重复执行同一条命令。