倒计时环用 stroke-dasharray 设周长、stroke-dashoffset 控制进度；文字需 HTML div 绝对定位居中并设 pointer-events: none；动画用 requestAnimationFrame + CSS transition 避免卡顿。
SVG <circle> 的 stroke-dasharray 和 stroke-dashoffset 怎么配？
倒计时环本质是“用虚线长度模拟进度”，不是靠旋转整个 SVG 容器——那样会连文字一起转，且难以精准控制终点。关键在两个属性：stroke-dasharray 设定一圈虚线总长（即周长），stroke-dashoffset 控制虚线起始点偏移量。
常见错误是直接写死数值，比如设 stroke-dasharray="100" 却没算实际周长；或把 offset 当成百分比用（它单位是像素，不是 %）。
- 先用 JS 算出圆的周长：
const circumference = 2 * Math.PI * radius，radius 取自<circle r="50">的r值 -
stroke-dasharray设为${circumference}，让整圈只有一段实线 -
stroke-dashoffset初始值 =circumference（完全隐藏），倒计时每秒减去circumference / duration - CSS 动画不能直接驱动
stroke-dashoffset的 JS 动态变化，得用transition或 requestAnimationFrame
为什么不用 transform: rotate() 直接转 <circle>？
因为 <circle> 是中心对称图形，单纯旋转它视觉上根本看不出动——除非加个非对称标记（比如一个 <path> 小三角当指针），但这就增加 DOM 复杂度，还容易和文字定位错位。
更严重的是：旋转动画无法与倒计时数值同步精确到帧。比如 5 秒倒计时，你希望第 3 秒时停在 60% 位置，但 rotate(216deg)（360×0.6）在 CSS timing function 下不一定准时到达。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS
rotate适合固定时长、无需 JS 交互的装饰性动画 - 倒计时环必须响应 JS 更新的剩余时间，
stroke-dashoffset是唯一能线性映射时间与视觉进度的属性 - 如果硬要用
rotate，得额外套一层<g transform="rotate(...)">并手动计算角度，反而绕远路
如何让文字居中且不随环旋转？
文字必须脱离 SVG 的坐标系，否则用 <text> 放在 <svg> 里，一旦给 <g> 加 transform，文字也会转。正确做法是把文字用 HTML <div> 盖在 SVG 上，靠绝对定位居中。
容易踩的坑是没设 pointer-events: none 在文字层，导致鼠标悬停时穿透不到底层 SVG，影响点击交互。
- SVG 容器设
position: relative - 文字
<div>设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 文字容器加
style="pointer-events: none"，确保事件透传给 SVG - 避免用
<foreignObject>，兼容性差，iOS Safari 对它的transform支持不稳定
动画卡顿或跳变的常见原因
倒计时环卡顿，90% 不是性能问题，而是 JS 更新频率和 CSS 渲染节奏没对齐。比如用 setTimeout 每秒更新一次 stroke-dashoffset，但浏览器未必每秒正好刷新一帧，尤其在后台标签页时。
另一个隐蔽问题是 SVG 的 viewBox 和容器尺寸不匹配，导致缩放重绘触发 layout thrashing。
- 用
requestAnimationFrame驱动更新，而不是setInterval - 确保 SVG 的
width/height与viewBox等比，例如viewBox="0 0 100 100"就配width="200px" height="200px" - 给
<circle>加style="transition: stroke-dashoffset 0.1s linear"，别依赖 JS 插值——CSS 过渡更稳 - 避免在每次更新时重复调用
getBoundingClientRect()或重排版操作
倒计时环最麻烦的从来不是画圆，而是让数字、动画、交互三者在不同设备上始终对齐——尤其是 iOS Safari 对 SVG stroke-dashoffset 的小数精度处理和 Android Chrome 不一致，上线前务必真机测。
