SVG/JS光标跟随时钟指针：角度基准与百分比起始位校准问题

需要实现一个类时钟对象，要求：

• 指针从圆心指向光标位置
• 支持以圆周百分比形式获取/设置指针位置

现有代码存在两个核心问题：

1. 指针角度计算未正确适配SVG视口，当圆位于SVG视口任意位置时计算错误
2. 当前0%对应3点钟位置，不符合常规时钟12点钟为0%的预期

同时存在以下疑问：

• 如何将DOM事件坐标转换为SVG坐标？
• 页面滚动时clientX/Y的适配问题如何解决？
• 如何通过数学调整修正角度起始位，让0%对应12点钟？

1. 正确转换DOM事件坐标到SVG坐标 #

clientX/Y是相对于浏览器视口的坐标，要转换为SVG内部的坐标，需使用SVG原生的createSVGPoint()和matrixTransform()方法——该方法会自动处理SVG的viewBox、缩放以及页面滚动的偏移问题，无需手动计算。

2. 修正角度起始位（0%对应12点钟） #

默认Math.atan2()的0角度指向3点钟方向（x轴正方向），要转到12点钟（y轴负方向），需要：

• 计算角度时减去Math.PI/2（90度）
• 处理角度的正负值，确保百分比始终落在0-100范围内

3. 基于圆心的角度计算 #

所有坐标计算均依赖时钟圆心的SVG坐标（circleX和circleY），而非固定数值，确保圆心位置变化时代码仍能正常工作。

HTML #

<input type="number" id="pc" min="0" max="100" value="0">
<br>
<svg id="clock-svg" width="250" height="300" viewBox="50 50 250 150" style="border:1px solid black">
    <rect x="0" y="0" width="100%" height="100%" fill="lightgrey" />
    <circle cx="100" cy="100" r="40" fill="none" stroke="black" stroke-width="2" />
    <line id="clock-hand" x1="100" y1="100" x2="120" y2="120" stroke="black" stroke-width="2" />
</svg>

JavaScript #

// 获取元素
const svg = document.getElementById('clock-svg');
const clockHand = document.getElementById('clock-hand');
const pc = document.getElementById('pc');
const handLength = 40; // 指针长度，匹配圆的半径
const circleX = 100; // 圆心SVG坐标X
const circleY = 100; // 圆心SVG坐标Y

// 百分比输入框事件监听
pc.addEventListener('input', function(event) {
  changePercentage(event.target.value);
});

// SVG鼠标移动事件监听
svg.addEventListener('mousemove', function(event) {
  // 将DOM事件坐标转换为SVG内部坐标
  const point = svg.createSVGPoint();
  point.x = event.clientX;
  point.y = event.clientY;
  const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse());

  // 计算鼠标相对于圆心的角度（修正为12点钟起始）
  let angle = Math.atan2(svgPoint.y - circleY, svgPoint.x - circleX) - Math.PI/2;
  
  // 处理负角度，确保在0到2π范围内
  if (angle < 0) {
    angle += 2 * Math.PI;
  }

  updateHand(angle);

  // 计算对应的百分比
  const percentage = (angle / (2 * Math.PI)) * 100;
  pc.value = parseInt(percentage, 10);
});

// 根据百分比设置指针位置
function changePercentage(percentage) {
  // 将百分比转换为角度（修正为12点钟起始）
  const angle = (percentage / 100) * 2 * Math.PI - Math.PI/2;
  updateHand(angle);
}

// 更新指针位置
function updateHand(angle) {
  const handX = circleX + handLength * Math.cos(angle);
  const handY = circleY + handLength * Math.sin(angle);
  
  clockHand.setAttribute('x2', handX);
  clockHand.setAttribute('y2', handY);
}

• 坐标转换：使用createSVGPoint()和matrixTransform()自动处理视口、缩放和滚动问题，彻底解决页面滚动和SVG视口适配的痛点。
• 角度修正：所有角度计算都减去Math.PI/2，将起始点从3点钟转到12点钟；同时在鼠标移动时处理负角度，确保角度始终在0到2π范围内，百分比计算更准确。
• 圆心依赖：所有坐标计算都使用定义好的circleX和circleY，即使圆心位置变化，只需修改这两个变量即可快速适配。

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