Svg 按钮路径动画

Question

我有这个 SVG 按钮，我正试图在鼠标悬停时制作动画。我希望按钮在悬停时产生斑点效果。我希望你们能帮助我。这是 SVG

的 link

https://codepen.io/haroldhall/pen/ZEJWJqo

<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823">
  <defs>
    <style>
      .fbfb67fb-85bf-41e7-ba32-d1082da05d29 {
        fill: #ff83b5;
      }
    </style>
  </defs>
  <g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2">
    <g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background">
      <path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" 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>

Answer 1

不确定您想要什么样的 blob 效果，但是您可以使用 JS 或 CSS 来实现。两者都涉及将路径更改为新的所需位置。我包括一个在悬停时稍微改变的例子。如果您需要帮助创建 blob，我推荐 https://www.blobmaker.app/

svg #original {
  transition: all 0.5s;
}

svg:hover #original {
  d: path("M76.9857,59.1319C52.7693,55.9614,1.16,189.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,179.4411,11.2431,65.3513,76.9857,59.1319Z");
}

<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823"><defs><style>.fbfb67fb-85bf-41e7-ba32-d1082da05d29{fill:#ff83b5;}</style></defs><g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2"><g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background"><path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" 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>

Answer 2

CSS 规则 d: path (" M76 .....); 当前不受 W3C SVG 规范支持。目前还只是基于Blink引擎的浏览器实验技术

因此，基于ruled:path`的解决方案不会跨浏览器，例如Firefox就不行。

考虑使用 SVG SMIL 的解决方案。
SMIL support

要变形按钮的轮廓，您需要在矢量编辑器中以水滴的形式创建最终路径

下图是在矢量编辑器中得到最终path的过程

抓住锚点并将其向下拖动，直到获得所需的形状。
保存svg文件，复制最终路径到morph动画命令。

下面是将按钮轮廓变形为水滴形状的动画代码：

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823">
  <defs>
    <style>
      .fbfb67fb-85bf-41e7-ba32-d1082da05d29 {
        fill: #ff83b5;
      }
    </style>
  </defs>
  <g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2">
    <g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background">
      <path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" d="M77 59C53 56 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-50 35-84 29Z" >
         <animate
           attributeName="d"
           begin="original.mouseover"
           dur="1s"
           fill="freeze"
           restart="WhenNotActive"
           values="
              M77 59C53 56 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-50 35-84 29Z; 
              M81 113C57 110 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-45 89-80 83z"
              />
      </path>
    </g>
  </g>
</svg>

Svg 按钮路径动画

Svg button path animation

javascript

css

svg

jquery-animate