如何用JavaScript在SVG圆内绘制1度中心填充弧？

核心逻辑 #

整个圆形对应360度，只需循环360次，每次生成一段1度的扇形弧（中心填充的弧本质是圆心到弧两端的闭合扇形）。关键是把角度转换为SVG路径所需的弧度，并准确计算弧的起点、终点坐标。

关键步骤 #

1. 角度转弧度：SVG路径的弧命令参数使用弧度，转换公式：弧度 = 角度 * Math.PI / 180
2. 计算弧端点坐标：基于圆心、半径和角度，用三角函数计算弧的起点和终点：
   • 起点X：centerX + radius * Math.cos(起始弧度)
   • 起点Y：centerY + radius * Math.sin(起始弧度)
   • 终点X/Y同理，用结束弧度计算
3. 生成闭合路径：每个1度弧的路径逻辑是：移动到圆心 → 连线到弧起点 → 绘制弧到终点 → 闭合路径回到圆心

完整代码示例 #

const svgNS = "http://www.w3.org/2000/svg";
const svg = document.getElementById("mySvg");
// 自定义圆心坐标和半径
const centerX = 150;
const centerY = 150;
const radius = 120;

// 循环生成360个1度扇形弧
for (let i = 0; i < 360; i++) {
  // 转换起始/结束角度为弧度
  const startRad = i * Math.PI / 180;
  const endRad = (i + 1) * Math.PI / 180;

  // 计算弧的起点和终点
  const startX = centerX + radius * Math.cos(startRad);
  const startY = centerY + radius * Math.sin(startRad);
  const endX = centerX + radius * Math.cos(endRad);
  const endY = centerY + radius * Math.sin(endRad);

  // 创建路径元素
  const path = document.createElementNS(svgNS, "path");
  // SVG路径命令：M(圆心) → L(弧起点) → A(画弧到终点) → Z(闭合)
  path.setAttribute("d", `M ${centerX} ${centerY} L ${startX} ${startY} A ${radius} ${radius} 0 0 1 ${endX} ${endY} Z`);
  // 可选：设置填充色（这里用色相渐变区分每个弧）
  path.setAttribute("fill", `hsl(${i}, 80%, 60%)`);
  // 去掉描边避免线条重叠
  path.setAttribute("stroke", "none");

  svg.appendChild(path);
}

路径命令说明 #

A ${radius} ${radius} 0 0 1 ${endX} ${endY} 中的参数：

• 前两个radius：弧的X/Y半径（圆形则两者相等）
• 0：X轴旋转角度（圆形无需旋转）
• 0：大弧标记（1度是小弧，设为0）
• 1：扫掠标记（顺时针绘制弧）
• 最后是弧的终点坐标

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