如何使下面的 SVG 中的动画流畅？

Question

我正在努力使下面的 svg 动画流畅。我想让白色渐变无限期地在路径中移动。任何建议都会很有帮助。

<svg width="8" height="243" viewBox="0 0 8 243" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 3L3 240" stroke="url(#paint0_linear)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"/>
                <defs>
                    <linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse">
                        <stop offset="0" stopColor="#E8FF00" stopOpacity="1">
                            <animate attributeName="stop-opacity" values="1;1;1;0;0;0.5;0.8;1;1;1;1;1" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="0.3" stopColor="#E8FF00" stopOpacity="0">
                            <animate attributeName="offset" values="0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4;0.3" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="0.4" stopColor="#E8FF00" stopOpacity="0">
                            <animate attributeName="offset" values="0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5;0.4" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="0.5" stopColor="#E8FF00" stopOpacity="0">
                            <animate attributeName="offset" values="0.5;0.4;0.3;0.2;0.1;0;1;0.9;0.8;0.7;0.6;0.5" dur="1s" repeatCount="indefinite"  />
                        </stop>
                        <stop offset="1" stopColor="#E8FF00" stopOpacity="1">
                            <animate attributeName="stop-opacity" values="1;1;1;1;0.8;0.5;0;0;0;1;1;1" dur="1s" repeatCount="indefinite"  />
                        </stop>
                    </linearGradient>
                </defs>
            </svg>

Answer 1

考虑使用 gradientTransform

解决渐变动画

下面是显示静态版本中白条位置的代码

<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
            
     <rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" /> 
 <defs>
    <linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%"" >
                      <stop offset="0%" stop-color="grey" />
      <stop offset="43%" stop-color="grey" />
      <stop offset="50%" stop-color="white" />
      <stop offset="57%" stop-color="grey" />
      <stop offset="100%" stop-color="grey" />
                             
    </linearGradient>
 </defs>
</svg>

添加动画命令使整个渐变从上到下移动
<animateTransform attributeName="gradientTransform" ... />

<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
            
     <rect x="3" y="3" width="5" rx="5" height="240" fill="url(#paint0_linear)" /> 
    <defs>
    <linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
      <stop offset="0%" stop-color="grey" />
      <stop offset="43%" stop-color="grey" />
      <stop offset="50%" stop-color="white" />
      <stop offset="57%" stop-color="grey" />
      <stop offset="100%" stop-color="grey" />
      <animateTransform attributeName="gradientTransform"
        type="translate"
        from="0 -1"
        to="0 1"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
    </linearGradient>
    </defs>
 </svg>

更新

@tejash jl 评论：

animationTransform is not working on line path

我稍微改变了你的路径

<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 3L3 240 L6 240 L6 3z" fill="url(#paint0_linear)"  stroke-linecap="round" stroke-linejoin="round"/>  
     
 <defs>
    <linearGradient id="paint0_linear" x1="0%" y1="0%" x2="0%" y2="100%" >
                      <stop offset="0%" stop-color="grey" />
      <stop offset="43%" stop-color="grey" />
      <stop offset="50%" stop-color="white" />
      <stop offset="57%" stop-color="grey" />
      <stop offset="100%" stop-color="grey" />
     <animateTransform attributeName="gradientTransform"
        type="translate"
        from="0 -1"
        to="0 1"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
                                                
    </linearGradient>
 </defs> 
    
</svg>

路径必须闭合，渐变动画才能工作。但您也可以 select 多段线并向该线应用渐变

<svg width="108" height="243" viewBox="0 0 108 243" fill="none" xmlns="http://www.w3.org/2000/svg">
        <polyline points="3,3 3,240" stroke="url(#paint0_linear)" stroke-width="5"  stroke-linecap="round" stroke-linejoin="round"/>    
     
 <defs>
    <linearGradient id="paint0_linear" x1="3" y1="3" x2="3" y2="240" gradientUnits="userSpaceOnUse" >
      <stop offset="0" stop-color="grey" />
      <stop offset=".43" stop-color="grey" />
      <stop offset=".50" stop-color="white" />
      <stop offset=".57" stop-color="grey" />
      <stop offset="1" stop-color="grey" />
     <animateTransform attributeName="gradientTransform"
        type="translate"
        from="0 -240"
        to="0 240"
        begin="0s"
        dur="1.5s"
        repeatCount="indefinite"/>
                                                
    </linearGradient>
 </defs> 
    
</svg>

如何使下面的 SVG 中的动画流畅？

How to make the animation smooth in the below SVG?

svg

svg-animate

更新