javascript - 使用 SVG 弧线绘制部分圆

Question

我想使用 SVG 绘制部分圆弧。根据docs ，自动计算圆心。但我的弧线超出了圆圈。用图片来演示更容易:


<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>


这里是 codepen 的链接链接。

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>