内联SVG动画最佳实践

Question

动画内联SVG的方法是什么？！我想在路径上做一些动画。就像在某些事件上旋转一样，多个路径上的animateMotion也由某个事件触发。

我将包含指向开发者网站的链接：http://www.myradon.net。我正在努力完成以下任务;

当电源插头（正好在“组合”上方）连接到女性（现在连接到网站）时，较粗的破折号将从顶部一直移动到页面底部（当前可视化）。我正在考虑这些虚线上的路径动画（因此速度取决于路径的长度，并且应该在前一个结束时开始）。虚线是jQuery在Ajax调用中插入的十几个SVG。

任何人都有一些明智的想法如何处理这个？ SMIL，Raphael / D3.js（SVG已经在DOM中）？编辑：顺便说一句，我不关心IE8及更少。

Answer 1

Javascript驱动的动画将为您提供所有浏览器的支持，并且使用诸如d3.js或raphaël之类的lib非常容易（两个库都有大量可在线使用的示例）。

根据您需要的交互性，您可以使用SVG动画（SMIL）并提供js后备，例如FakeSMILe（对于IE）。如果图形主要由简单的动画组成，而不是那么多的交互，这种方式可能更有意义，因为用这种方式用图形编辑器编辑图形会更容易。