如何为SVG路径上的脉动线段添加跟随路径的渐变动画？

针对你的需求，这里提供两种可行方案，适配不同的渐变方向需求：

方案一：屏幕左到右渐变（纯CSS+SVG） #

这种方案保留你原有的CSS dash动画逻辑，通过同步渐变偏移量实现渐变跟随脉动线段移动：

1. 在SVG的<defs>中定义线性渐变，用CSS变量控制渐变的起始/结束位置：

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 渐变范围匹配脉动线段长度（100） -->
    <linearGradient 
      id="pulseGradient" 
      x1="var(--dash-offset)" 
      y1="0" 
      x2="calc(var(--dash-offset) + 100)" 
      y2="0" 
      gradientUnits="userSpaceOnUse"
    >
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#6366f1" />
    </linearGradient>
  </defs>

  <!-- 替换成你自己的路径d属性值 -->
  <path 
    class="animate-graph" 
    d="M50,250 C150,100 350,400 450,250" 
    stroke-width="3" 
    fill="none"
  />
</svg>

2. 修改CSS代码，用CSS变量同步stroke-dashoffset和渐变偏移：

.animate-graph{
  --dash-offset: 0;
  stroke: url(#pulseGradient);
  stroke-dasharray: 100 4350;
  stroke-dashoffset: var(--dash-offset);
  animation: dash 3s infinite linear;
}

@keyframes dash {
  from { 
    --dash-offset: 0;
    stroke-dashoffset: 0; 
  }
  to { 
    --dash-offset: -2000; /* 与stroke-dashoffset变化量对应，符号相反 */
    stroke-dashoffset: 2000; 
  }
}

核心逻辑是让渐变范围刚好覆盖脉动的可见线段，随着dash偏移同步移动渐变，确保线段始终显示屏幕左到右的渐变效果。

方案二：沿路径方向渐变（贴合路径走向） #

如果需要渐变方向跟随路径弯曲（即线段前进方向为渐变从左到右），可以用SVG的<animateMotion>实现：

1. 定义渐变、基础路径和可移动的渐变线段：

<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 线段自身的左到右渐变 -->
    <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#6366f1" />
    </linearGradient>
  </defs>

  <!-- 可选的基础背景路径 -->
  <path 
    d="M50,250 C150,100 350,400 450,250" 
    stroke="#e5e7eb" 
    stroke-width="3" 
    fill="none"
  />

  <!-- 脉动线段，长度匹配原dash长度（100） -->
  <line 
    x1="0" 
    y1="0" 
    x2="100" 
    y2="0" 
    stroke="url(#lineGradient)" 
    stroke-width="3"
    stroke-linecap="round"
  >
    <!-- 沿路径移动，rotate="auto"让线段自动跟随路径方向旋转 -->
    <animateMotion
      dur="3s"
      repeatCount="indefinite"
      rotate="auto"
    >
      <mpath href="#target-path" />
    </animateMotion>
  </line>

  <!-- 供mpath引用的目标路径 -->
  <path 
    id="target-path" 
    d="M50,250 C150,100 350,400 450,250" 
    stroke="transparent" 
    fill="none"
  />
</svg>

这个方案通过移动独立的渐变线段，并让它自动跟随路径旋转，完美适配复杂路径的走向，渐变方向始终与线段前进方向一致。

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