如何实现双侧dashoffset同步移动的SVG进度环动画

问题背景 #

• 开发Codepen动效时使用了GSAP库，不了解GSAP不影响核心逻辑理解，问题本身只和SVG环形路径的stroke-dashoffset、stroke-dasharray属性相关
• 群组内分享的参考Codepen为平台Premium付费内容，无付费权限无法查看源码，因此尝试自行通过双dashoffset配置实现双向动画效果，但始终未达到预期
• 目前分别有可正常运行的参考版本、自行编写的运行异常版本两个Demo，均托管在Codepen平台
• 当前编写的进度环核心样式代码如下：

.circle-container__progress {
  fill: none;
  stroke-linecap: round;
  stroke: var(--completion-color);
  stroke-dasharray: 100 100;
  stroke-linecap: square;
  stroke-width: var(--circle-border-width);
  /* // For animations...
  // transition: stroke-dashoffset 1s ease-in-out;
  // will-change: transform; */
}

核心疑问：是参考代码中存在未被注意到的实现逻辑，还是本身就无法通过stroke-dasharray双值配置实现双向动画效果？如果该方案不可行，需要给出可行的实现方式。

问题解答 #

首先现有代码里存在一个属性冲突：先后两次定义stroke-linecap，前一次设置的round会被后一次的square覆盖，这个问题只会影响端点显示样式，不是动画效果不符合预期的核心原因。

核心结论 #

单条SVG路径仅靠配置双值stroke-dasharray+调整stroke-dashoffset，根本无法实现双向伸缩的动画效果，没实现出来不是配置写错了，是方案本身走不通。
参考效果也不是靠单路径改这两个属性做的，漏看的核心逻辑是：参考效果用了两层完全重合的进度路径做叠加，不是单条路径。
单条路径的stroke-dasharray本质是定义沿路径方向重复排列的虚线、间隔长度，修改stroke-dashoffset只会让整组虚线沿路径方向整体平移，不可能出现同一段虚线同时向两个方向伸长/缩短的效果。

可行实现方案 #

两种无付费依赖的实现方案，按需选择即可：

1. 双路径叠层方案（和参考效果逻辑一致，落地难度最低）
   • 第一步先计算环形路径的总周长：周长C = 2 * π * 环形半径
   • SVG内先放一层固定的轨道环，再叠放两个完全重合的进度路径，两个进度路径的stroke-dasharray统一设置为C C
   • 调整其中一个进度路径的起点（可以通过路径偏移、CSS旋转实现），让两个路径的延伸方向互相对称
   • 动画执行时，分别控制两个进度路径的stroke-dashoffset，让二者从两端向中间延伸对应长度即可，端点样式统一设置为round或square就能得到和参考一致的视觉效果
2. 单路径遮罩方案（DOM结构更简洁）
   • 仅使用单条进度路径，stroke-dasharray设置为总周长，通过stroke-dashoffset控制整体显示的长度
   • 给路径添加锥形渐变遮罩，把路径两端不需要显示的部分做透明处理，模拟双向延伸的视觉效果；这个方案DOM更少，但端点圆角效果的处理成本比双路径方案高。

内容的提问来源于stack exchange，提问作者Myth Vince