使用SVG Blending Filter实现GIF同款太阳波纹效果的方案问询

你当前的实现思路是对的，只需要调整feTurbulence的动画逻辑，替换掉现有的色相旋转动画，就能得到你要的水平波纹涟漪效果：

核心修改点 #

• 移除feColorMatrix的色相旋转动画，改为直接给feTurbulence添加baseFrequency的x轴位移动画
• 调整feDisplacementMap的缩放值，让波纹形态更自然

完整可运行代码 #

CSS #

body {
  background: grey;
}
svg {
  background-color: #fff;
}

HTML #

<svg width="200" height="200" viewBox="0 0 200 220" xmlns="http://www.w3.org/2000/svg">
  <defs>
     <filter id="ripple">
      <!-- 调整baseFrequency参数，适配水平涟漪的形态 -->
      <feTurbulence type="fractalNoise" numOctaves="1" baseFrequency="0.015 0.1" seed="2" result="turb">
        <!-- 仅动画x轴频率，实现水平流动的波纹效果 -->
        <animate attributeName="baseFrequency" dur="8s" values="0.015 0.1;0.1 0.1;0.015 0.1" repeatCount="indefinite" />
      </feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turb" scale="12" />
    </filter>
    
     <clipPath id="clip-bottom">  
       <rect x="0" y="140" width="300" height="200" /> 
     </clipPath>  
    
    <linearGradient id="sunGradient" gradientTransform="rotate(90)">
      <stop offset="5%"  stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>    
    
    </defs>
  
  <!-- 静态太阳主体层 -->
  <circle cx="100" cy="100" r="100" fill="url('#sunGradient')"/>
  <!-- 仅下半部分显示的波纹层 -->
  <circle cx="100" cy="105" r="100" filter="url(#ripple)" clip-path="url(#clip-bottom)"/>  
</svg>

效果说明 #

• 动画仅作用于太阳下半部分，和参考GIF效果一致，模拟太阳下半部分在水面倒影的涟漪效果
• 波纹为自然流动的水平形态，无多余色相变化，完全匹配金红渐变的太阳配色
• 完全使用原生SVG动画实现，无额外JS引入，性能更好，代码结构更简洁

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