如何实现SVG按钮hover状态下的blob流体形变动画效果

你可以通过纯CSS控制SVG路径的d属性过渡实现需求，不需要引入额外JavaScript，具体实现逻辑和代码如下： #

核心实现原理 #

Blob流体形变的本质是相同锚点数量的SVG路径之间的平滑过渡，你只需要提前准备好1-2个和原有路径锚点数量一致的形变后路径，再给路径加过渡规则即可实现自然的流体效果。 #

完整可运行代码 #

<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823">
  <defs>
    <style>
      .blob-path {
        fill: #ff83b5;
        /* 流体感缓动参数，可自行调整时长和曲线适配需求 */
        transition: d 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* hover时替换为形变后的路径值，以下为示例形变路径，你可以在Figma/AI中调整原路径锚点生成更符合预期的效果 */
      svg:hover .blob-path {
        d: path("M75.234,61.342C51.453,58.123,2.345,91.234,1.234,42.345C0.342,10.234,39.234,-9.234,77.234,8.234c34.234,16.123,83.234,-15.234,86.234,22.123C164.234,81.234,112.234,67.234,75.234,61.342Z");
      }
    </style>
  </defs>
  <g data-name="Layer 2">
    <g data-name="Background">
      <path class="blob-path" d="M76.9857,59.1319C52.7693,55.9614,1.16,89.3257.01,40.4447-.7354,8.7354,38.7113-11.033,76.1673,6.64c33.8056,15.9511,84.1836-17.2117,85.0374,23.6112C162.2335,79.4411,111.2431,65.3513,76.9857,59.1319Z" />
    </g>
  </g>
</svg>

效果优化建议 #

• 想要更灵动的果冻流体感，可以给路径叠加hover时的微小缩放动画，弹性缓动参数可以调整为cubic-bezier(0.68, -0.55, 0.265, 1.55)，视觉上会更有弹性
• 可以多准备2-3个不同的形变路径，用CSS关键帧做hover时的连续形变，效果会更接近真实流体的不规则摆动感
• 如果需要按钮可点击，直接把svg包裹在a标签或者button标签里即可，不影响原有交互逻辑

内容的提问来源于stack exchange，提问作者harold hall