对于想要了解path标签其他字母属性和相关path使用的朋友，可以参看以下文章

SVG_5_矢量图_Path标签_弧线世界开启

SVG_18_a标签_clipPath标签_限制路径效果

SVG_23_mpath标签_轨迹复用

SVG_38_path标签之字母Q—二次贝塞尔曲线

贝塞尔曲线百科

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

简单一句话总结：贝塞尔曲线是可以通过控制点灵活控制的曲线。

今日知识点：

二次贝塞尔曲线其实是三次贝塞尔曲线的特殊形式，两个控制点坐标是同一个，三次贝塞尔曲线是有两个控制点的。

C c1x,c1y c2x,c2y x,y

字母C之后：

c1x,c1y这一对儿坐标表示第一个控制点；

c2x,c2y这一对儿坐标表示第二个控制点；

x,y这一对儿坐标表示终点坐标；

<!-- 绘制各种曲线是，M起点坐标一定是要的C标签:C c1x,c1y c2x,c2y x,y
    三次贝塞尔曲线，    字母C之后：    c1x,c1y这一对儿坐标表示第一个控制点；    c2x,c2y这一对儿坐标表示第二个控制点；    x,y这一对儿坐标表示终点坐标；-->    <path d="M20,20C30,200 400,200 200,10" fill="none" stroke="red"  />

左侧切线交点坐标为控制点1，

右侧切线交点坐标为控制点2。

（示意图，凑活看）

下方是随意做了一个图形效果

Xi说孔方兄认证