SVG中使用path画圆需要使用圆形命令。圆形path命令有两个:A和C。其中,A命令用于画整个圆形,而C命令则用于画圆的一部分。
以A命令为例,圆命令的语法为:A rx ry x-axis-rotation large-arc-flag sweep-flag x y。
| 说明 | |
|---|---|
| 名称 | 椭圆弧(elliptical Arc) | 
| 指令 | A(绝对)a(相对) | 
| 参数 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ rx和ry是椭圆的两个半轴长度 x-axis-rotation是椭圆相对于坐标系的旋转角度,角度数而非弧度数 large-arc-flag是标记绘制大弧(1)还是小弧(0)部分 sweep-flag是标记向顺时针(1)还是逆时针(0)方向绘制 x y 是圆弧终点的坐标 | 
| 描述 | 从当前点绘制一段椭圆弧到点 (x, y),椭圆的大小和方向由 (rx, ry) 和 x-axis-rotation 参数决定, x-axis-rotation 参数表示椭圆整体相对于当前坐标系统的旋转角度。椭圆的中心坐标 (cx, cy) 会自动进行计算从而满足其它参数约束。large-arc-flag 和 sweep-flag 也被用于圆弧的计算与绘制。 | 
下面是一个绘制圆形的例子:
vue
<svg width="100" viewBox="-50 -50 100 100">
  <path d="M0,-50
           A50,50 0 1,1 0,50
           A50,50 0 1,1 0,-50z" fill="transparent" stroke="#000" stroke-width="2"/>
</svg>其中M命令代表将起始点移动到(0,-50),z命令代表闭合路径。 A命令画了两个半圆,分别从(0,-50)到(0,50)和从(0,50)到(0,-50),组成了一个完整的圆形。
需要注意的是,在使用A命令画圆时,需要分别使用两个半圆来绘制完整的圆形。