stroke-dasharray只接受绝对长度单位，需用JS动态计算周长并结合CSS自定义属性实现自适应；正确做法是固定viewBox、用--r变量控制半径、手动设置strokeDashoffset避免过渡倒流。
stroke-dasharray 的值必须是像素单位，不能用百分比或 rem
很多人试图写 stroke-dasharray: 100% 或 stroke-dasharray: 2rem，浏览器直接忽略——SVG 的描边控制属性只接受绝对长度（px、cm、in 等），CSS 里没有运行时计算能力，calc() 在部分旧版 Safari 中对 stroke-dasharray 支持也不稳定。
真正能用的只有两种方式：
- JS 动态注入：读取
<circle r="45"></circle>后算出周长，再设为style.strokeDasharray = circumference - CSS 自定义属性 + JS 绑定：把周长存进
style.setProperty('--circum', circumference)，然后 CSS 里写stroke-dasharray: var(--circum) 0
自适应的关键不是“自动算周长”，而是“统一缩放基准”
所谓“自适应”，常被误解为“尺寸变，进度环自动重算”。但 SVG 的 viewBox 才是控制缩放的核心。如果硬写死 r="45"，再用 width: 100%; height: auto，r 值不会变，只是整个 SVG 被拉伸，描边会糊、动画会卡。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 固定
viewBox="0 0 200 200"（即逻辑画布 200×200） -
<circle cx="100" cy="100" r="90"></circle>—— r 占 viewBox 宽高的 45%，缩放时比例不变 - 周长按
2 * Math.PI * 90 ≈ 565.5算，设为stroke-dasharray: "565.5 0" - 后续所有动画、JS 更新都基于这个固定逻辑尺寸，不碰实际 px 尺寸
用 CSS 变量传周长，但别在 :root 里硬编码
有人在 :root 里写 --circum: 565.5，结果换一个尺寸的环就得改 CSS，根本谈不上“变量控制”。变量要绑定到具体实例上。
推荐结构：
<svg class="progress-ring" style="--r: 90"> <circle class="ring-bg" r="var(--r)" /> <circle class="ring-fg" r="var(--r)" /> </svg>
然后 JS 里：
const r = parseFloat(svg.style.getPropertyValue('--r'));
const circumference = 2 * Math.PI * r;
svg.querySelector('.ring-fg').style.strokeDasharray = `${circumference} 0`;这样每个 .progress-ring 可独立设 --r，变量真正在起作用。
动画过程中修改 stroke-dashoffset，别依赖 transition 回退
常见错误：给 .ring-fg 加 transition: stroke-dashoffset 0.3s，然后 JS 改 strokeDashoffset——看似能动，但一旦进度跳变（比如从 30% 突然到 80%），浏览器会补中间帧，导致视觉“倒流”。
更可控的做法是：
- 用
requestAnimationFrame手动插值，每帧设一次strokeDashoffset - 或者用 CSS
@keyframes配合animation-play-state控制启停，但仅适用于固定时长动画（如加载中） - 若需 JS 控制进度，
stroke-dashoffset必须每次设为精确目标值，不要依赖过渡缓动
最易被忽略的一点：圆环是否带文字？如果文字是 SVG <text></text>，它不会随 stroke-dashoffset 动；但如果是 HTML 元素盖在 SVG 上，得额外用 transform 对齐中心——这点一错，整个“自适应”就偏了。
