怎么使用CSS制作环形进度条_通过stroke-dasharray属性控制SVG路径-css教程-PHP中文网

直接设 stroke-dasharray 常常不转圈，是因为未用 gettotallength() 获取 svg 圆的真实周长，导致数值错位；正确做法是 dom 加载后调用该方法获取周长，并固定 stroke-dasharray 为“周长,周长”，再通过 stroke-dashoffset 从周长值渐变至 0 实现 0%→100% 动画。

怎么使用css制作环形进度条_通过stroke-dasharray属性控制svg路径

为什么直接设 `stroke-dasharray` 常常不转圈？

因为 SVG 圆形路径（<circle></circle>）的总长度不是凭空算出来的，得先用 getTotalLength() 算出真实周长，否则填任意数字都会错位或卡住。常见现象是：进度条只显示一小段、突然跳变、或者完全不动。

实操建议：

必须在 DOM 加载完成后调用 getTotalLength()，不能写死数值（比如 200 或 314）
若用 JS 动态更新，每次修改前先缓存一次长度，避免重复计算
注意：CSS 里不能调用 getTotalLength()，它只能在 JS 中运行

如何用 `stroke-dasharray` 和 `stroke-dashoffset` 配合实现“从 0% 到 100%”动画？

核心逻辑是固定虚线总长（即周长），再通过偏移量把“实线起点”从最右顺时针往左推——偏移越大，露出的实线越短，看起来就是“进度减少”。所以 100% 对应 offset = 0，0% 对应 offset = totalLength。

示例（JS 控制）：

const circle = document.querySelector('circle');
const radius = 45;
const circumference = 2 * Math.PI * radius; // 或用 circle.getTotalLength()
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = circumference; // 初始隐藏
<p>// 模拟加载到 60%
const progress = 60;
circle.style.strokeDashoffset = circumference * (1 - progress / 100);</p>

注意：stroke-dasharray 第二个参数是 gap 长度，填和第一个相同值能确保无缝衔接；若只写一个值（如 stroke-dasharray: 283），浏览器会自动补 gap 为剩余部分，但行为不稳定，尤其在动画中。

用 CSS @keyframes 动画时，`stroke-dashoffset` 为什么有时不生效？

因为 SVG 元素默认不触发 CSS 动画，除非显式声明 transform: rotate(0) 或加 will-change: stroke-dashoffset 触发硬件加速；更常见的是动画属性没被识别——stroke-dashoffset 是 SVG 特有属性，必须在支持它的环境中使用（现代浏览器都行，但 IE 完全不支持）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

实操建议：

动画定义里必须包含 stroke-dashoffset，不能只靠 JS 改
初始状态（from）要设明确值，例如 stroke-dashoffset: 283，不能留空或 inherit
若用 CSS-in-JS 或框架（如 React），确保内联样式优先级高于 CSS 类，否则会被覆盖

环形进度条在不同尺寸下怎么保持比例？

硬编码 r="45" 或固定 viewBox="0 0 100 100" 是安全做法。一旦用百分比或 rem 设置 r，getTotalLength() 返回值就不可靠（SVG 渲染前无法准确测量）。

推荐结构：

<svg viewbox="0 0 100 100" width="200px" height="200px"><circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" stroke-width="8"></circle><circle cx="50" cy="50" r="45" fill="none" stroke="#4caf50" stroke-width="8" stroke-dasharray="283 283" stroke-dashoffset="283"></circle></svg>

关键点：