使用SVG圆弧绘制局部圆

Question

我想使用SVG绘制局部弧。 根据文档 ，圆心自动计算。 但是我的弧线圈满了。 用图片更容易演示：

<svg width="500px" height="500px" viewBox="0 0 100 100" style="border: navy solid 1px;"> <g transform="translate(10 10) scale(0.5 0.5)"> <path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path> <path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path> </g> </svg>

这是指向代码笔链接的链接。

Answer 1

您可以在蓝色圆圈之前绘制圆弧（就像我画红色一样），也可以重画圆弧段（最后一行-我强调绿色，但是必须是蓝色）。 因此，圆弧+段的组合给出了月牙形

 <path d="M50 50 L50 0 A1 1 0 0 1 100 50 Z" fill="red" opacity="0.7"></path>
 <path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
 <path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
 <path d="M50 0 A50 50 0 0 0 0 50 Z" fill="green"></path>