如何实现SVG四分之一圆边框顺时针无限渐变#FF00AF的动画效果

实现思路 #

靠双层路径+原生SVG描边动画就能实现，无额外依赖，性能友好：

1. 保留原有底色边框，再叠一层完全同路径的高亮边框，描边色设为#FF00AF
2. 用stroke-dasharray定义高亮描边的长度，stroke-dashoffset控制描边的起始偏移
3. 给偏移属性加线性无限动画，让高亮描边沿路径顺时针滚动，就实现了逐段变色的循环效果

你提供的路径本身绘制方向就是顺时针，不需要额外调整路径参数。

完整可运行代码 #

<svg width="339" height="313" viewBox="0 0 339 313" fill="none" xmlns="http://www.w3.org/2000/svg">
  <style>
    .highlight-stroke {
      stroke: #FF00AF;
      stroke-width: 1.5;
      stroke-dasharray: 787 787;
      animation: strokeFlow 3s linear infinite;
    }
    @keyframes strokeFlow {
      0% {
        stroke-dashoffset: 787;
      }
      100% {
        stroke-dashoffset: -787;
      }
    }
  </style>
  <g filter="url(#filter0_d)">
    <path d="M133.015 269.306C95.2823 283.628 54.8411 291 14 291V204C32.8678 202.471 75.793 198.058 96.5517 188.636C122.724 178.701 146.504 164.14 166.536 145.783C186.567 127.427 202.457 105.634 213.297 81.6503C224.138 57.6662 229.718 31.9602 229.718 6H325C325 43.4267 316.956 80.487 301.327 115.065C285.697 149.643 262.789 181.061 233.91 207.525C205.031 233.99 170.747 254.983 133.015 269.306Z" fill="url(#paint0_radial)"/>
    <!-- 原有底色边框 -->
    <path d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z" stroke="#DB3BB1" stroke-width="1.5"/>
    <!-- 新增高亮流动边框 -->
    <path class="highlight-stroke" d="M14.75 204.691V290.249C55.2463 290.159 95.3332 282.807 132.748 268.604C170.395 254.315 204.597 233.371 233.404 206.972C262.21 180.574 285.057 149.238 300.643 114.756C316.125 80.5048 324.142 43.8137 324.249 6.75H230.466C230.36 32.5632 224.761 58.1104 213.981 81.9592C203.097 106.039 187.146 127.913 167.042 146.336C146.945 164.754 123.089 179.362 96.84 189.329C86.36 194.08 70.3618 197.547 54.6835 200.019C39.3496 202.436 24.2459 203.91 14.75 204.691Z"/>
  </g>
  <defs>
    <filter id="filter0_d" x="0" y="0" width="339" height="313" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
      <feOffset dy="8"/>
      <feGaussianBlur stdDeviation="7"/>
      <feComposite in2="hardAlpha" operator="out"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
    </filter>
    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(169.5 148.5) rotate(90) scale(142.5 155.5)">
      <stop offset="0.727873" stop-color="#8C1F6F"/>
      <stop offset="1" stop-color="#93006C"/>
    </radialGradient>
  </defs>
</svg>

可调参数 #

• 动画速度：修改strokeFlow动画的3s参数，数值越小滚动速度越快
• 高亮拖尾长度：修改stroke-dasharray的第一个值，比如改成200 787，就会显示长度为200的高亮色块在路径上滚动
• 如果后续换了其他路径，直接调用JS的path.getTotalLength()就能拿到新的路径总长度，替换掉787这个数值即可

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