使用SVG和JavaScript创建Wave动画

Question

I want to animate a path with SVG creating a similar effect as show below: http://commons.wikimedia.org/wiki/Category:Animations_of_vibrations_and_waves#/media/File:Amfm2.gif

http://commons.wikimedia.org/wiki/Category:Animations_of_vibrations_and_waves#/media/File:Frontgroupphase.gif

The problem is that I have never used SVG to create a path transformation and I don't know if it's even possible to achieve this result. Looking through the web I have found Snap.svg but still no clear documentation. Are there any examples available or even a working demo of such a thing?

Answer 1

You would use an <animate> element to animate the d attribute of a path. See http://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil