svg path 画弧线

svg用路径画弧线图，对于像我这样的初学菜鸟来说不太友好，看解释来说是挺费劲的，查百度的一般难以看懂，不够通俗易懂，过于官方语言，自己动手画的时候，这曲线它有自己的想法，非常任性，后来琢磨了一下，大概了解怎么回事了。先上效果图。

图片.png

简单来说就是点线面，就和学数学一样，在一个平面上，一个点有x,y坐标，而多个点连起来就是连成线，加了填充就是面。

path 标签 ：
M 0 65 即开始点在以画布为参考对象的 M( x: 0, y: 65 ) 点
S 表示 平滑曲线，关于使用什么线，可以在菜鸟教程中查看和测试https://www.runoob.com/svg/svg-path.html

其中大写S表示以画布为参照物(绝对定位，大写都是这个意思)，后面数据点的坐标以画布最左上角作为参照物

小s的话，是以上一个点为参照物(相对定位，即上一个点当做是0,0，同理)

本例中：

圆： 圆心(65,65)，半径为65，直径130

路径：

即以 点 M(0，65) (参照物为画布)出发，点(32.5,32.5)以上一个点M(0,65)起始点(0,0)，点(65,0)以上一个点(32.5,32.5)当做起始点(0,0)，形成弧线最后一个闭合点，
其中点(32.5,32.5)并不是说在弧线经过这个点，而是这个点是弧线两条切线的交点

图片.png

那么到第二个半圆也就懂了

即以 点 M(65，65) (参照物为画布)出发，接下来的点以上一个点为参照物

除了弧线，其他线也是这样