stroke-dasharray画不出完整圆环的根本原因是未按实际周长2Math.PIr精确设置其值与stroke-dashoffset，而误用固定数值如100；需JS计算周长并动态更新偏移量，同时确保SVG属性、单位、样式和渲染模式四者一致。
为什么 stroke-dasharray 画不出完整圆环？
常见现象是画出来只有半圈、缺一角，或动画卡在起点不动。根本原因是 stroke-dasharray 和 stroke-dashoffset 的计算依赖于 SVG 路径的真实周长，而很多人直接写死 100 或 200 —— 这完全不匹配实际 r 值。
正确做法是先算出圆周长：2 * Math.PI * r。比如 r="50"，周长就是约 314.16。这个值必须精确传给 stroke-dasharray（作为总长度）和初始 stroke-dashoffset（作为起始偏移）。
- 若用 CSS 变量控制，建议在 JS 中计算后注入
--circumference，避免硬编码 - CSS 里写
stroke-dasharray: var(--circumference)，不是100%或100 -
stroke-dashoffset初始设为var(--circumference)，动画终点设为0，才能实现从空到满
如何让进度条随 JS 数据实时更新？
不能只靠 CSS 动画一次性播完；真实场景需要根据 progress = 0~100 动态设置偏移量。核心是把百分比转成偏移像素：offset = circumference * (1 - progress / 100)。
例如：周长 314.16，当前进度 65%，则 stroke-dashoffset 应设为 314.16 * (1 - 0.65) ≈ 109.96。
- 用
element.style.strokeDashoffset = offset + 'px'直接设置（注意驼峰命名） - 不要用
transition控制整个过程——它无法响应中间值变化，应改用animation+@keyframes配合内联stroke-dashoffset计算 - 若需平滑过渡，给
stroke-dashoffset加transition: stroke-dashoffset 0.3s ease-out，但前提是每次更新都走 style 赋值
IE 或旧版 Safari 不动？检查这几个兼容点
stroke-dasharray 和 stroke-dashoffset 在 IE11+、Safari 9+ 支持良好，但仍有细节踩坑：
- SVG 必须有明确的
viewBox，例如viewBox="0 0 100 100"，否则某些 Safari 版本会忽略r计算 - 不要用
%单位写stroke-dasharray，只接受数值或px - IE11 不支持 CSS 变量注入 SVG 属性，得用 JS 直接写
setAttribute('stroke-dasharray', val) - 动画若卡顿，关闭
shape-rendering: crispEdges（它会禁用抗锯齿并干扰 dash 渲染）
为什么加了 animation 却没动？
最常漏掉的是：没给 stroke 和 fill="none"。没有描边，dash 属性就无效；有填充会盖住描边动画。
- 必须显式写
stroke="#4a90e2"、stroke-width="8"、fill="none" - CSS 动画需作用于
svg circle，而非父容器；且要确保该display: none）隐藏 - 若用
@keyframes，关键帧里必须写全属性：stroke-dashoffset: 314.16px;，不能省略单位 - 动画时长建议 ≥ 0.2s，太短在低端设备上容易感知不到变化
实际做下来，最难的不是写对公式，而是让周长计算、单位、CSS 优先级、SVG 渲染模式这四者对齐。稍有不一致，圆环就“失踪”或“抽搐”。动手前先用 DevTools 检查 computed 样式里的 stroke-dasharray 和 stroke-dashoffset 是否真被应用，比反复调动画更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
