使用stroke-dashoffset实现SVG描边动画失败，渐变未变化如何解决？

你的代码存在两个关键问题导致动画无效果，以下是修复方案：

核心问题分析 #

1. 未设置stroke-dasharray：stroke-dashoffset的偏移效果完全依赖stroke-dasharray定义的线段分段规则，没有该属性时描边是连续状态，偏移操作不会产生任何视觉变化。
2. stroke-dashoffset使用了不支持的百分比值：SVG标准中该属性仅接受具体数值，需与stroke-dasharray的长度严格匹配。

修复后的完整代码 #

CSS #

circle {
  stroke-width: 21;
  /* 设置为圆的周长（计算公式：2*π*半径，这里2*π*210≈1319.47），让描边成为单一完整线段 */
  stroke-dasharray: 1319.47;
  /* 初始偏移量等于周长，让描边完全隐藏 */
  stroke-dashoffset: 1319.47;
  stroke: url(#color);
  fill: none;
  animation: stroking 60s linear infinite;
}

@keyframes stroking {
  from {
    stroke-dashoffset: 1319.47;
  }
  to {
    stroke-dashoffset: 0;
  }
}

HTML #

<svg height="500px" width="500px">
  <defs>
    <linearGradient id="color">
      <stop offset="0%" stop-color="#e91e63" />
      <stop offset="100%" stop-color="#673ab7" />
    </linearGradient>
  </defs>
  <!-- 移除px单位，SVG属性默认使用用户单位，无需额外标注 -->
  <circle cx="250" cy="250" r="210" />
</svg>

进阶优化：让渐变随描边同步动态变化 #

如果需要渐变颜色跟随描边绘制进度移动（而非固定在整个圆上），可给渐变的stop元素添加动画：

@keyframes gradientShift {
  0% { offset: 0%; }
  100% { offset: 100%; }
}

#color stop:nth-child(1) {
  animation: gradientShift 60s linear infinite;
}
#color stop:nth-child(2) {
  animation: gradientShift 60s linear infinite reverse;
}

内容的提问来源于stack exchange，提问作者Ayush Sharma