svg用路徑畫(huà)弧線圖，對(duì)于像我這樣的初學(xué)菜鳥(niǎo)來(lái)說(shuō)不太友好，看解釋來(lái)說(shuō)是挺費(fèi)勁的，查百度的一般難以看懂，不夠通俗易懂，過(guò)于官方語(yǔ)言，自己動(dòng)手畫(huà)的時(shí)候，這曲線它有自己的想法，非常任性，后來(lái)琢磨了一下，大概了解怎么回事了。先上效果圖。

圖片.png

簡(jiǎn)單來(lái)說(shuō)就是點(diǎn)線面，就和學(xué)數(shù)學(xué)一樣，在一個(gè)平面上，一個(gè)點(diǎn)有x,y坐標(biāo)，而多個(gè)點(diǎn)連起來(lái)就是連成線，加了填充就是面。

path 標(biāo)簽 ：
M 0 65 即開(kāi)始點(diǎn)在以畫(huà)布為參考對(duì)象的 M( x: 0, y: 65 ) 點(diǎn)
S 表示 平滑曲線，關(guān)于使用什么線，可以在菜鳥(niǎo)教程中查看和測(cè)試https://www.runoob.com/svg/svg-path.html

其中大寫(xiě)S表示以畫(huà)布為參照物(絕對(duì)定位，大寫(xiě)都是這個(gè)意思)，后面數(shù)據(jù)點(diǎn)的坐標(biāo)以畫(huà)布最左上角作為參照物

小s的話，是以上一個(gè)點(diǎn)為參照物(相對(duì)定位，即上一個(gè)點(diǎn)當(dāng)做是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" />
即以 點(diǎn) M(0，65) (參照物為畫(huà)布)出發(fā)，點(diǎn)(32.5,32.5)以上一個(gè)點(diǎn)M(0,65)起始點(diǎn)(0,0)，點(diǎn)(65,0)以上一個(gè)點(diǎn)(32.5,32.5)當(dāng)做起始點(diǎn)(0,0)，形成弧線最后一個(gè)閉合點(diǎn)，
其中點(diǎn)(32.5,32.5)并不是說(shuō)在弧線經(jīng)過(guò)這個(gè)點(diǎn)，而是這個(gè)點(diǎn)是弧線兩條切線的交點(diǎn)

圖片.png

那么到第二個(gè)半圓也就懂了
<path d="M 65 65 s 32.5 -32.5 65 0" stroke="blue" stroke-width="1" fill="blue" />
即以 點(diǎn) M(65，65) (參照物為畫(huà)布)出發(fā)，接下來(lái)的點(diǎn)以上一個(gè)點(diǎn)為參照物

除了弧線，其他線也是這樣

<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>