内联svg动画的最佳实践

inline-SVG animation best practice

本文关键字：最佳 svg 动画内联更新时间：2023-09-26

如何动画内联svg ?!我想在路径上做一些动画。就像在某个事件上旋转一样，多个路径上的animateMotion也会被某个事件触发。

我将包含一个到开发站点的链接:http://www.myradon.net。我试图完成以下任务;

当电源插头(就在"portfolio"上方)连接到母线(现在在网站中连接)时，较粗的破折号将从页面的顶部一直移动到底部(当前可视化)。我在考虑这些虚线上的路径动画(所以速度取决于路径的长度，应该在前一个结束时开始)。虚线是由jQuery在Ajax-call中插入的12个svg。

谁有什么好主意来处理这个问题?SMIL, Raphael/D3.js (svg已经在DOM中了)?编辑:顺便说一下，我不关心IE8或更少。

javascript驱动的动画将为您提供所有浏览器的支持，并且使用d3.js或raphaël等库很容易做到(这两个库的在线示例很多)。

根据你需要多少交互性，你可以使用SVG动画(SMIL)，并提供一个js回退，如FakeSMILe (IE)。如果图形主要由简单的动画组成，并且没有太多的交互，那么这种方式可能更有意义，因为使用图形编辑器可以更容易地编辑图形。