【问题标题】：How to make the animation smooth in the below SVG?如何在下面的 SVG 中使动画平滑？
【发布时间】：2021-06-13 08:51:27
【问题描述】：

我试图使下面的 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>

【问题讨论】：

使用 stop-color 代替 stop-color 和 stop-opacity 代替 stopColor 和 stopOpacity
我正在使用反应，所以我不得不将它们转换为反应传递属性的方式以避免警告。我的不好必须以正确的方式粘贴代码

标签： svg svg-animate

【解决方案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 cmets:

animationTransform 不在线路路径上工作

我稍微改变了你的路径

<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>

必须关闭路径才能使渐变动画生效。但是你也可以选择一条折线并给这条线应用渐变

<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>

【讨论】：

animationTransform 不在线路路径上工作。