CSS如何制作自适应的圆形进度环_变量控制stroke-dasharray

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"> 后算出周长，再设为 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"> —— 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>，它不会随 stroke-dashoffset 动；但如果是 HTML 元素盖在 SVG 上，得额外用 transform 对齐中心——这点一错，整个“自适应”就偏了。