矩形CSS边框环形动画异常求助，寻求SVG实现方案

问题说明 #

需要为矩形实现带渐隐效果的环形边框动画，原CSS实现存在效果问题，希望通过SVG完成但不熟悉其动画机制。原有CSS代码如下：

.container {
  width: 400px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  transform: scaleX(-1);
  justify-content: center
}

.container::before {
  content: "";
  background-image: conic-gradient(#4429F2 20deg, transparent 120deg);
  width: 150%;
  height: 150%;
  position: absolute;
  animation: rotate 5s linear infinite;
}

.container::after {
  content: "";
  width: 395px;
  height: 195px;
  background: #E5E7EB;
  position: absolute;
  border-radius: 5px;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(-360deg)
  }
}

<div class="container"></div>

SVG解决方案 #

SVG可以精准控制边框路径与渐隐效果，通过路径虚线偏移动画配合线性渐变，实现符合需求的环形边框效果。完整代码如下：

<svg width="400" height="200" viewBox="0 0 400 200" style="border-radius:5px; background:#E5E7EB;">
  <!-- 定义渐隐渐变：从实色过渡到透明 -->
  <defs>
    <linearGradient id="fadeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4429F2" stop-opacity="1" />
      <stop offset="80%" stop-color="#4429F2" stop-opacity="1" />
      <stop offset="100%" stop-color="#4429F2" stop-opacity="0" />
    </linearGradient>
  </defs>
  
  <!-- 绘制矩形边框路径 -->
  <path d="M5,5 L395,5 L395,195 L5,195 Z" 
        fill="none" 
        stroke="url(#fadeGradient)" 
        stroke-width="5" 
        stroke-dasharray="1160 1160" 
        stroke-dashoffset="0">
    <!-- 循环偏移动画：实现边框环绕效果 -->
    <animate attributeName="stroke-dashoffset" 
             from="0" 
             to="-1160" 
             dur="5s" 
             repeatCount="indefinite" 
             linear="true" />
  </path>
</svg>

关键逻辑说明 #

1. 渐隐渐变：通过<linearGradient>定义从实色到透明的过渡，让边框末端自然渐隐
2. 路径绘制：d属性定义矩形边框路径，内缩5px以匹配原容器的内边距效果
3. 虚线动画：
   • stroke-dasharray="1160 1160"：设置虚线段长度等于矩形边框周长（(390+190)*2=1160），确保可见段为完整的渐隐线段
   • <animate>控制stroke-dashoffset从0到-1160，让渐隐线段沿着边框循环移动，实现环形动画

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