如何使用SVG的path元素绘制符合给定参数的部分圆形

核心语法说明 #

SVG path的圆弧绘制通过A指令实现，d属性的基础结构为：
M [起点x坐标] [起点y坐标] A [x半径] [y半径] [x轴旋转角度] [大弧标记] [绘制方向标记] [终点x坐标] [终点y坐标]

参数说明 #

• 正圆场景下x半径和y半径取值相同，直接填写你已有的半径值即可，x轴旋转角度固定填0
• 大弧标记（large-arc-flag）：取值0表示绘制起点到终点的小角度弧（对应圆心角≤180°），取值1表示绘制大角度弧（对应圆心角>180°）
• 绘制方向标记（sweep-flag）：取值0表示沿逆时针方向绘制圆弧，取值1表示沿顺时针方向绘制圆弧

代码示例 #

假设已知：圆心坐标为(100,100)，半径为50，圆弧起点为(100,50)，终点为(150,100)，需要绘制顺时针小角度圆弧，代码如下：

<!-- 仅绘制圆弧线段 -->
<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 100 50 A 50 50 0 0 1 150 100" fill="none" stroke="#f00" stroke-width="2" />
</svg>

如果需要绘制闭合扇形，在圆弧指令后追加指向圆心的直线指令和闭合指令即可：

<!-- 绘制闭合扇形 -->
<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 100 50 A 50 50 0 0 1 150 100 L 100 100 Z" fill="#ff0" stroke="#f00" stroke-width="2" />
</svg>

内容的提问来源于stack exchange，提问作者Steve