利用SVG的path元素中的A命令绘制圆形

## 利用SVG的path元素中的A命令绘制圆形

<path d="
        M cx, cy
        m -r, 0
        a r,r 0 1,0 (r * 2),0
        a r,r 0 1,0 -(r * 2),0
    "/>
  或者
   <path d="
        M cx - r, cy
        a r,r 0 1,0 (r * 2),0
        a r,r 0 1,0 -(r * 2),0
    "/>

1.  cx,cy开始坐标，r圆弧半径；
2. A命令后面的两个参数表示的是绝对坐标；
3. a命令后面的两个参数表示的是相对坐标；
   

一. 预备知识

1.SVG坐标系
x=0,y=0点在左上角，向右x值增加，向下y值增加；
2.M命令和m命令
M100,100:大写M表示移动到绝对坐标(100,100)，从这里开始画图；
m-75,0:小写m表示相对坐标，这里在大写字母后面表示的绝对坐标是:(25,100),即M100,100  m-75,0   表示从坐标(25,100)的位置开始画图
3.给定圆弧半径，经过平面上两点的圆弧圆心落在两点的中垂线上,  一般有两个
4.A命令:绘制一个椭圆圆弧
A rx ry x-axis-rotation large-arc-flag sweep-flag X Y，表示绘制一个椭圆圆弧经过(X,Y)点。
rx：椭圆横轴半径
ry：椭圆竖轴半径
x-axis-rotation：椭圆横轴相对于CanvasX轴的偏移角度
large-arc-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，此值取0表示绘制小弧度，取值1表示绘制大弧度
sweep-flag：在前三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，去掉上面large-arc-flag标识后还有两个，sweep-flag 取值0表示绘制逆时针方向的圆弧，取值1表示绘制顺时针方向的圆弧。

 二:示例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
    <path  id="circle" d="
        M 100, 100
        m -75, 0
        a75,75 0 1,0 150,0
        a75,75 0 1,0 -150,0"
    style="stroke:#000000;fill:#f0f0f5"/>


     <path  id="left" d="
        M25, 100
       L100,100"
    style="stroke:#00ffff;"/>


    <path id="right" d="
        M100, 100
       L175,100"
    style="stroke:#ff00ff;"/>


    <path id="top" d="
        M100, 100
       L100,25"
    style="stroke:#ffff66;"/>
    
    <path id="bottom" d="
        M100, 100
       L100,175"
    style="stroke:#ccccff;"/>
</svg>

path：left,right,top,bottom为辅助说明的四条直线；

 三:示例说明
1. M100,100：移动到点（100，100）；

2. m-75,0：移动到坐标（100，100）的相对坐标（-75，0）处，即绝对坐标（25，100）处；

3.a75,75 0 1,0 150,0：经过点（25，100）和其相对坐标（150，0）（绝对坐标是（175，100）），半径是75，按逆时针方向画弧，执行完之后得到下半部半圆，点的坐标到达（175，100）处；

4. a75,75 0 1,0 -150,0：经过点（175，100）和其相对坐标（-150，0）（绝对坐标是（25，100）），半径是75，按逆时针方向画弧，执行完之后得到上半部半圆；

svg图像

 四:参考

1. https://brucewar.gitbooks.io/svg-tutorial/15.SVG-path%E5%85%83%E7%B4%A0.html
2. https://blog.csdn.net/u013478336/article/details/52277875
3. https://codepen.io/jakob-e/pen/bgBegJ