svg动态时钟通过原生js实时计算时分秒针旋转角度并用transform="rotate(angle,150,150)"更新，核心是角度转换（-90°偏移）、requestanimationframe驱动及毫秒级插值实现平滑动画。
用 SVG 实现动态时钟的指针旋转，核心是让时针、分针、秒针根据当前时间实时计算旋转角度，并通过 transform="rotate(...)" 更新。不需要 JavaScript 框架，原生 JS + SVG 就能完成，关键在于角度计算和 DOM 更新时机。
SVG 结构：定义表盘与三根指针
先构建基础 SVG，中心点设为 (150,150)，半径 140，所有指针以中心为旋转原点。指针用 <line></line> 绘制，stroke 和 stroke-width 控制样式，origin 默认是 SVG 坐标原点，所以需配合 transform-origin 或直接用 rotate(angle, cx, cy) 精确控制旋转中心：
角度计算：时分秒对应的真实旋转值
SVG 的 rotate() 默认绕元素左上角旋转，必须指定中心点（150,150）。角度从正右方向开始逆时针增长，而钟表是从正上方顺时针走 —— 所以实际使用时要转换：
- 秒针：每秒转 6°，但起始位置是顶部（-90°），即 rotate(6 * seconds - 90, 150, 150)
- 分针：每分钟转 0.1°（6°/60），叠加秒影响： rotate(6 * minutes + 0.1 * seconds - 90, 150, 150)
- 时针：每小时转 30°（360°/12），每分钟再转 0.5°（30°/60），叠加秒微调：rotate(30 * hours + 0.5 * minutes + 0.5/60 * seconds - 90, 150, 150)
注意：24 小时制需对 hours % 12 处理；12 小时制可直接用 new Date().getHours() % 12。
实时更新：requestAnimationFrame 优于 setInterval
用 requestAnimationFrame 驱动动画更平滑、节电，且自动适配屏幕刷新率：
- 获取当前时间，分别算出秒、分、时数值
- 按上述公式算出三个旋转角度
- 用
element.setAttribute("transform", "rotate(...)")直接更新 - 递归调用
requestAnimationFrame(updateClock)
避免用 setInterval(fn, 1000)——它不保证准时，易累积误差，且在页面后台时仍运行，浪费资源。
增强细节：让秒针“滴答”或“滑动”可选
默认秒针是跳跃式（整秒跳），如需平滑滑动，把秒值换成带毫秒的小数：const now = new Date(); const seconds = now.getSeconds() + now.getMilliseconds() / 1000;
这样秒针每秒匀速转一圈，视觉更自然。分针和时针也同步加入毫秒级插值，整体运动更连贯。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
