要SVG动画你只需要使用一个SMIL填充工具。

一个填充工具为code的特殊JavaScript的一块，提供了功能从浏览器中缺少支持，翻译在一个浏览器可以理解的原始编码。

由Eric Willigers作出的SMIL填充工具做到了这一点：它转换成SMIL，即使是微软的浏览器支持的Web动画API。它是如此有效，以至于谷歌浏览器开发者决定放弃原生支持SMIL，专注于网络动画，留下来的埃里克Willigers填充工具在Chrome中播放SMIL文件的任务。

有人错误地间preTED这是由Chrome SMIL的去precation，并批评开发者为这个选择。但它不是一个真正的去precation，只是间preting SMIL的一个填充工具层面工作的搬迁。

事实上，Chrome的开发者自己引Willigers填充工具在非常正式宣布他们的意图去precate SMIL。

因此​​，如果你对SMIL的消亡各地的网络阅读，不用担心。在SMIL的死亡被大大地夸大。它更像是一个重生。

要在所有浏览器，包括IE和EDGE使用SMIL，你只需要这个JavaScript填充工具添加到您的网页：

https://github.com/ericwilligers/svg-animation

下面是使用由汤姆·伯恩，流行flash2svg出口的作者所做的填充工具演示页：

不填充工具的页面：结果
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

和用填充工具相同的页面结果
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

如果您查看源是pretty不言自明。

另外随着填充工具的性能往往比原来的SMIL更好，因为在许多浏览器的Web动画是硬件加速，而SMIL通常不是。

The snippet bellow shows the thing I want to do. But there are some problems:

1. How to make this animation without using SMIL?
   SMIL is deprecated and has a bad browser support.
2. How to make black path going through right end og the blue one?
   Red, blue and green paths have the same length.
3. Animation should be repeated down - up - down - up and so on.

The first question is the main one. I have some ideas about the others but I can't apply them before the first question is solved. I wrote the other questions just to clarify what am I doing.

http://jsfiddle.net/2yLxpjaw/2/

svg {
    outline: 1px solid silver;
}

path {
    opacity: .25;
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
}

#test {
    opacity: .5;
}

<svg width="200" height="200">
    <path stroke="red" d="m 22 100 q 68 0 136 -68" />
    <path stroke="blue" d="m 22 100 q 68 0 156 0" />
    <path stroke="green" d="m 22 100 q 68 0 136 68" />
    <path id="test" stroke="black" d="m 22 100 q 68 0 136 -68" />
    <animate xlink:href="#test"
             attributeName="d"
             from="m 22 100 q 68 0 136 -68"
             to="m 22 100 q 68 0 136 68"
             dur="3s"
             repeatCount="indefinite" />
</svg>

PS: Same question in Russian.

To animate SVG you just need to use a SMIL polyfill.

A polyfill is a special javascript piece of code that provides support for features missing from a browser, translating the original encoding in one that the browser can understand.

The SMIL polyfill made by Eric Willigers does just that: it translates SMIL into Web Animations API that even the Microsoft browser supports. It is so efficient that Google Chrome developers decided to drop native SMIL support and focus on Web Animations, leaving to the Eric Willigers polyfill the task to play SMIL files in Chrome.

Someone wrongly interpreted this as a deprecation of SMIL by Chrome, and criticized the devs for this choice. But it was not a true deprecation, just a relocation of the job of interpreting SMIL on a polyfill level.

In fact the Chrome devs themselves cited the Willigers polyfill in the very official announce about their intent to deprecate SMIL.

So if you read around the web about the demise of SMIL, don’t worry. The "death" of SMIL was greatly exagerated. It’s more like a rebirth.

To use SMIL on all browsers, including IE and EDGE, you just need to add this javascript polyfill to your web page:

https://github.com/ericwilligers/svg-animation

Here is a demo page using the polyfill made by Tom Byrne, the author of the popular flash2svg exporter:

the page without the polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

and the same page with the polyfill:
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

If you look at the source it is pretty much self-explanatory.

Also the performances with the polyfill are often better than the original SMIL, because on many browsers Web Animations is hardware accelerated, while SMIL is usually not.