jquery - 看到按钮有一个有趣的效果

Question

我想在将鼠标悬停在 svg 对象上时创建与此网站 http://animejs.com/ 完全相同的效果.

为此，我打开 inkscape 并绘制一条路径并保存悬停之前和之后的两个状态。

第一个状态:

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

 <path d="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z"
 style="fill:none; stroke:#ff17ff;"/>
</svg>

第二状态

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

 <path d="m11 103c62-7.8 121-6.3 178 0v42c-61 9.7-120 6.3-178 0z" 
       style="fill:none;stroke:#ff17ff"/>
</svg>

很可能需要在js/jquery中完成，告诉我如何实现这个效果？如何以如此灵活的方式更改路径？

Answer 1

要对按钮的轮廓进行动画处理，您需要对参数 d patch 进行动画处理

<animate attributeName="d" values="path1;path2" dur="2s" begin="btn.mouseover" /> 

.container {
width:25%;
height:25%;
}

<div class="container">
<svg   viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

 <path id="btn"  d="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z"
 style="fill:none; stroke:#ff17ff;">
 <animate attributeName="d" values="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z;m11 103c62-7.8 121-6.3 178 0v42c-61 9.7-120 6.3-178 0z" dur="1s" begin="btn.mouseover" />
 </path>
 <text x="23" y="136" font-size="36" >mouseover</txt>
</svg>
</div>