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

路径：
<path d="M 0 65 s 32.5 32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />
即以 点 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

那么到第二个半圆也就懂了
<path d="M 65 65 s 32.5 -32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />
即以 点 M(65，65) (参照物为画布)出发，接下来的点以上一个点为参照物

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="65%" fx="50%" fy="50%">
      <stop offset="60%" style="stop-color:rgb(193,227,252);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(193,227,252);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="65" cy="65" rx="65" ry="65" fill="url(#grad1)" />
  <path d="M 0 65 s 32.5 32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />
  <path d="M 65 65 s 32.5 -32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />
</svg>