React+Tailwind CSS环形进度条：百分比计算及属性疑问
2026-7-10
SVG环形进度条：stroke-dasharray与stroke-dashoffset详解
一、stroke-dasharray 是什么？
stroke-dasharray 是SVG核心属性，用于定义描边的虚线样式，语法为逗号分隔的长度值列表，依次代表线段长度和线段间距。
以你提供的代码为例：
.progress-ring__circle { stroke-dasharray: 400, 400; ... }
这里的400是预先计算好的环形周长（公式：周长C=2×π×半径r，比如半径≈63.66时，C≈400）。设置400,400意味着：描边是一段400px的实线，紧接着一段400px的空白。因为环形总长度刚好是400px，空白部分超出了环形范围，所以初始状态下会显示完整的环形实线。
二、stroke-dashoffset 是什么？
stroke-dashoffset 是SVG属性，用于设置虚线的起始偏移量：数值为正时，虚线沿路径反方向（默认顺时针，偏移为正则逆时针移动）偏移对应长度；数值为负则向正方向偏移。
它的核心作用是通过偏移虚线，控制环形实线的显示长度，以此实现进度条的动态效果。
三、如何用这两个属性设置进度百分比？
核心逻辑是通过偏移量隐藏环形中未完成的部分，只保留对应百分比的实线长度。
以你代码中的stroke-dashoffset="calc(400 - (400 * 45) / 100)"为例：
- 基础值明确：
400是环形总周长C，45是目标进度百分比 - 计算已完成长度：
(C × 百分比) / 100 = (400×45)/100 = 180px - 计算偏移量：
C - 已完成长度 = 400 - 180 = 220px
当设置stroke-dashoffset=220时，原本的400px实线向左偏移220px，此时环形上可见的实线长度为400-220=180px，刚好对应总长度的45%，即45%的进度。
通用设置步骤：
- 计算环形周长：
C = 2 × π × r（r是SVG中circle元素的r属性值，即环形半径）
- 计算环形周长：
- 给进度环的circle元素设置
stroke-dasharray: C, C，确保初始显示完整环形
- 给进度环的circle元素设置
- 根据目标进度百分比P，计算偏移量：
offset = C - (C × P) / 100
- 根据目标进度百分比P，计算偏移量：
- 将
offset赋值给stroke-dashoffset属性，即可显示对应百分比的进度
- 将
额外提示：通常会给circle元素添加transform: rotate(-90deg)，让进度从环形顶部开始（默认SVG环形起点在右侧），这是优化视觉体验的辅助设置，不影响核心进度计算逻辑。
内容的提问来源于stack exchange，提问作者Khalid
相关产品推荐
相关产品推荐
