Javascript 可以动态设置SVG的动画吗？

我正在为我的网站编写代码，我有一个很棒的想法，就是制作SVG容器中导航栏的动画。由于自然波浪的设计，我想要的东西类似于不和谐的介绍，在那里波浪扫过屏幕，同时挥动。所以我想知道是否有一种方法我可以做到这一点，开放的任何想法。JQuery，Java，CSS，任何有帮助的东西

我曾稍微使用过CSS，但不知道应该从Java或JQuery开始。我正在寻找一种方法，让这个工作与汉堡菜单点击

正文{
字体系列：“Raleway”，Arial，Verdana，无衬线；
溢出x：隐藏；
}
a{
文字装饰：无；
颜色：白色；
}
.main_hd_cont{
位置：绝对位置；
顶部：-1.25vw；
左：1.5vw；
z指数：2；
颜色：白色；
}
.main_hd_txt{
字体大小：3.5vw；
字体系列：“芭蕾舞与和谐芭蕾舞与和谐”；
}
svg{
滤镜：阴影（.5vw.5vw.15vw rgb（0,0,0,0.6））；
}
.svg导航{
位置：绝对位置；
排名：0；
左：0；
z指数：1；
最大宽度：100vw；
宽度：100vw；
}

代码咖啡屋|主页
@字体{
字体系列：“芭蕾舞与和谐芭蕾舞与和谐”；
src:url（'ballet\u harmony-webfont.woff2'）格式（'woff2'），url（'ballet\u harmony-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
公司名称
.st0{fill:url（#SVGID_1)}

您可以使用css转换路径的d属性，如下所示：

路径{
过渡：d1s；
d:路径（'M547 93.0001C496 38.0001457 29 372 15C276.086-0.79759-57-52 9.99988 240C33.2036 341.127 87.9999 397 157 366C226 335 285 227 325 341C365 455 407 425 598 412C789 399 841 322 839 233C837 144 688 162 642 169C596 176 598 148 547 93.0001Z'）；
}
路径：悬停{
d:path（'M547 92C471.994 92 482.5-39.5 372 14C284.509 56.3601-57-53 9.99984 239C33.2035 340.127 82.5699 351.503 157 365C253.5 382.5 248.741 246.296 325 340C401.5 434 445.063 526.153 598 411C768 283 874.5 310 839 232C802.123 150.975 671.067 131.667 642 168C616 200.5 547 92Z'）；
}

我会调查一下。研究这些例子并找出如何将其应用于您的形状。这对你来说应该是一个很好的开始。@Miro我很想使用GreenSock提供的有用的变形SVG插件，不幸的是，这是为我正在创业的企业设计的，我需要一个商业类许可证才能做到这一点，目前我没有GreenSock的资金。抱歉等待太久，这是我个人的原因。这段代码，你已经把代码，它是否给我提到的波浪动画？此外，如果有机会可以将其替换为关键帧动画，我们将非常感谢您的帮助。是的，您可以为波浪设置动画，是的，您可以使用关键帧。是一样的。您只需使用css设置路径的

d

属性的动画。好的，谢谢您的帮助。昨天晚些时候，我发现了一种方法，通过使用snapsvg和一些JQuery语法可以充分发挥作用。但是你的帮助仍然非常感谢。太棒了。我从未使用过snap，但听说过很多关于它的好东西。但是，您应该知道，您可能不需要jQuery来使用它（并且您应该避免仅仅为了实现一个简单的效果而添加两个库）。