svg的path绘制整个圆弧，或者大圆弧(超过180度)，必须用两个a命令吗？

Question

如下所示绘制整圆弧的方法，能否只用一个a命令绘制一个整圆弧，或者大于180度的圆弧？

<svg width="100px" height="100px" viewBox="0 0 200 200">
    <path d="M 100 100 m -75 0 a 75 75 0 1 0 150 0 a 75 75 0 1 0 -150 0"
          fill="none" stroke="orange" stroke-width="10"/>
</svg>

Answer 1

从数学的角度出发,结合使用a命令画一个整圆,
那就是给定一个点(开始画图的点和终点相同),给定一个圆的半径,
可以过这个点作无数的圆,
那程序咋知道你要画哪个圆呢?🤣

---

画个超过180的圆弧,可以指定画优弧和顺/逆时针,这样就能画好了

Answer 2

SVG 路径 | MDN

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

large-arc-flag 决定弧线是大于还是小于 180 度，0 表示小角度弧，1 表示大角度弧。sweep-flag 表示弧线的方向，0 表示从起点到终点沿逆时针画弧，1 表示从起点到终点沿顺时针画弧。

Answer 3

可以画一个非常接近的圆，然后关闭路径：

<svg width="500" height="500" viewBox="0 0 200 200">
    <path d="M 100 100 m -75 0 a 75 75 0 1 1 0 1 z"
          fill="none" stroke="orange" stroke-width="1"/>
</svg>

Answer 4

小编认为在 SVG 中绘制完整的圆弧（大于 180 度的圆弧），只能使用两个a命令。SVG 的<path>元素中的弧线命令a（或A）只能绘制小于等于180度的弧段。因此，为了绘制完整的圆或大于180度的圆弧，需要使用两个弧线命令来组合。

例如，绘制一个完整的圆弧（360度）的方式如下：

<svg width="100px" height="100px" viewBox="0 0 200 200">
    <path d="M 100 100 m -75 0 
             a 75 75 0 1 0 150 0 
             a 75 75 0 1 0 -150 0"
          fill="none" stroke="orange" stroke-width="10"/>
</svg>

在这个示例中，使用了两个a命令来绘制两个180度的弧段，从而组合成一个完整的圆。

要绘制大于180度但小于360度的圆弧，仍然需要使用两个或更多的a命令。例如，绘制一个270度的圆弧：

<svg width="100px" height="100px" viewBox="0 0 200 200">
    <path d="M 100 100 m -75 0 
             a 75 75 0 0 1 150 0 
             a 75 75 0 0 1 -150 0 
             a 75 75 0 0 1 75 -75"
          fill="none" stroke="orange" stroke-width="10"/>
</svg>

在此示例中，使用了三个a命令来绘制三个90度的弧段，从而组合成一个270度的弧。

总结来说，由于SVG的弧线命令限制为绘制小于等于180度的弧段，因此绘制完整的圆弧或大于180度的弧段时，必须使用多个a命令。无法只使用一个a命令来绘制完整的圆弧或大于180度的圆弧。