实现不规则形状SVG渐变边框无限循环加载动画可行性问询

你想要的渐变沿圆形路径无限循环的加载动画，完全可以用SVG原生的动画功能搞定。我基于你提供的SVG代码，修改出了两种符合需求的方案，你可以根据自己想要的效果选：

方案一：填充渐变沿路径循环 #

这种是让渐变填充沿着你定义的胶囊形状路径循环流动，和你说的“渐变沿圆形路径无限循环”匹配度很高：

<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
  <!-- 先定义一个径向渐变，颜色和透明度可以随便调 -->
  <defs>
    <radialGradient id="loadingGrad" cx="0" cy="0" r="15" fx="0" fy="0">
      <stop offset="0%" stop-color="#4CAF50" stop-opacity="1"/>
      <stop offset="50%" stop-color="#2196F3" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#FFC107" stop-opacity="0"/>
      <!-- *核心：让渐变的中心沿着你的路径无限跑圈* -->
      <animateMotion
        xlink:href="#loadingGrad"
        dur="2s" <!-- 动画时长，数值越小速度越快 -->
        repeatCount="indefinite" <!-- 无限循环 -->
        path="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1"
        rotate="auto"
      />
    </radialGradient>
  </defs>
  <!-- 把原路径的填充换成刚才定义的渐变，保留原来的描边 -->
  <path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" 
        stroke="#000" 
        stroke-width="2" 
        fill="url(#loadingGrad)"/>
</svg>

方案二：描边渐变沿路径循环 #

如果你想要的是描边的渐变沿着路径滚动（类似进度条的流动效果），可以用这个方案：

<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义一个线性渐变给描边用 -->
    <linearGradient id="strokeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4CAF50"/>
      <stop offset="50%" stop-color="#2196F3"/>
      <stop offset="100%" stop-color="#FFC107"/>
    </linearGradient>
  </defs>
  <path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" 
        stroke="url(#strokeGrad)" 
        stroke-width="2" 
        fill="none"
        stroke-dasharray="160" <!-- 这个数值要和路径长度匹配，我大概测了下是160左右 -->
        stroke-dashoffset="0">
    <!-- *核心：通过改变dash偏移量让渐变描边动起来* -->
    <animate attributeName="stroke-dashoffset" from="160" to="0" dur="2s" repeatCount="indefinite"/>
  </path>
</svg>

小提示 #

• 两种方案里的颜色、动画时长、渐变范围都可以随意调整，直到调出你想要的效果；
• 方案一中，调整径向渐变的r值可以改变渐变的大小，数值越大渐变覆盖的范围越广；
• 方案二中，如果动画效果不对，可以微调stroke-dasharray的数值，确保和路径实际长度一致。

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