svg用path画半圆
A指令用来绘制一段弧线,且.允许弧线不闭合。可以把A命令绘制的弧线想象成是椭圆的某一段,A指令以下有七个参数。
A rx ry 顺时针角度 1大弧0小弧 1顺时针0逆时针 终点x 终点y
第三个参数，顺时针角度，这个参数是针对椭圆弧使用的，如果 rx ry 相等的话，设置这个顺时针角度是没有意义的，默认为0就可以了
下面来看看这个角度对椭圆弧的影响
<path d="M 100,150 a 50 70 90 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
<path d="M 100,150 a 50 70 0 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
<circle cx="100" cy="150" r="5" stroke="none" stroke-width="2" fill="red"/>
<path d="M 100,150 a 50 70 -45 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
我以为 45度 时，起始点会像 0度 90度 那样，在椭圆的中心轴与圆弧的交点上，结果竟然不是的，也不晓得这个点的规律是什么
已下均以rx、ry相等的情况说明，画圆弧
当起点终点间的距离大于直径时，画的永远是半圆，只有起点终点间距离小于半径才能画大半圆和小半圆。
下面的直径是200 * 2，起点终点的距离是300，选择了1（大弧）
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="550"> <path d="M 100 350 A 200 200 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" /> <!-- Mark relevant points --> <g stroke="black" stroke-width="3" fill="black"> <circle id="pointA" cx="100" cy="350" r="3" /> <circle id="pointC" cx="400" cy="350" r="3" /> </g> <!-- Label the points --> <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="100" y="350" dx="-30">A</text> <text x="400" y="350" dx="30">B</text> </g> </svg> </body> </html>
下面两种情况直径都不大于起点终点间的距离，画的都是一样大小的半圆
<path d="M 100 350 A 20 20 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" /> <path d="M 100 350 A 150 150 0 1 1 400 350" stroke="black" stroke-width="5" fill="none" />
画圆形可以利用相对路径，A表示绝对路径，a表示相对路径
<path d="M 100,150 a 50 50 0 1 1 0 1 z" fill="none" stroke="black" stroke-width="5" id="circle" />
这里的 a 后面的最后两个参数 0 1，表示x不变，y向下偏移1，最后利用 z 闭合路径
如果不加z，不闭合的效果如下图
