SVG按钮路径动画答案

【问题标题】：Svg button path animationSVG按钮路径动画
【发布时间】：2021-12-19 10:37:46
【问题描述】：

我有这个 SVG 按钮，我试图在悬停时设置动画。我希望按钮在悬停时产生斑点效果。我希望你们能帮助我。这是SVG的链接

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>

【问题讨论】：

标签： javascript css svg jquery-animate

【解决方案1】：

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

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

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

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

下图展示了在矢量编辑器中获取最终path的过程。

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

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

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

【讨论】：

【解决方案2】：

不确定您想要什么样的 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>

【讨论】：