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

作者：袖梨 2026-06-23

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，变量真正在起作用。