javascript - 内联 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 等库非常容易实现(这两个库都有大量在线示例)。

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