JavaScript绘制SVG圆弧角度错误，调整距中心距离参数时角度异常偏移

核心修改方案 #

问题根源 #

1. 角度坐标系不匹配：SVG默认0度指向右侧，顺时针旋转，你的自定义角度规则为0度朝上、顺时针递增，存在90度偏移。
2. 弧长单位错误：你原先传入的长度参数为像素单位的弧长，不同半径的圆相同角度对应的弧长不同，因此修改距中心距离时角度宽度会同步变化。

修改后完整代码 #

JS代码

let svg = document.getElementById("icon");
function drawLine(azimuth, radius, arcDegree)
{
  let circumference = radius * 2 * Math.PI;
  // 按指定角度宽度动态计算对应弧长
  let arcLength = (arcDegree / 360) * circumference;
  let line = document.createElementNS(svg.namespaceURI, "circle");
  line.setAttribute("r", radius);
  line.setAttribute("stroke-dasharray", arcLength + ' ' + circumference);
  // 修正90度角度偏移，对齐自定义角度体系
  line.setAttribute("transform", "rotate(" + (azimuth - 90) + ")");
  svg.appendChild(line);
}

let DISTANCE_FROM_CENTER1 = 93,
DISTANCE_FROM_CENTER2 = 65,
DISTANCE_FROM_CENTER3 = 30,
DISTANCE_FROM_CENTER4 = 9;

// 第四个参数为圆弧的角度宽度，可根据需求调整，示例为68度
drawLine(312, DISTANCE_FROM_CENTER1, 68);
drawLine(312, DISTANCE_FROM_CENTER2, 68);
drawLine(312, DISTANCE_FROM_CENTER3, 68);
drawLine(312, DISTANCE_FROM_CENTER4, 68);

CSS代码（无修改）

svg {
  width: 400px;
}

circle {
  fill: none;
  stroke: black;
  stroke-width: 14;
}

HTML代码（无修改）

<svg id="icon" viewBox="-100 -100 200 200">
</svg>

额外说明 #

要避免圆弧重叠，只需保证相邻两个DISTANCE_FROM_CENTER的差值大于stroke-width（当前设置为14）即可，你当前的参数已经满足要求。

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