内嵌SVG动画最佳实践

什么是内嵌SVG动画的方式？我想在路径上做一些动画。就像旋转某个事件一样，多条路径上的animateMotion也会由某个事件触发。内嵌SVG动画最佳实践

我将包含指向Dev站点的链接：http://www.myradon.net。我正在努力完成以下内容;

当电源插头连接到母座（现在连接到网站）时，较粗的破折号将从顶部一直延伸到页面底部（当前可视化）。我在这些虚线上思考路径动画（所以速度取决于路径的长度，并应在上一个结束时开始）。虚线是由jQuery在Ajax调用中插入的十几个SVG。

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

来源

2013-03-03 myradon

Javascript驱动的动画将为您提供对所有浏览器的支持，并且使用诸如d3.js或raphaël这样的库很容易（这里有大量可用于在线获取这些库的示例）。

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

来源

2013-03-04 10:19:51

好吧！它将主要是简单的动画旋转，发光，某些事件触发的animateMotion。我不在乎旧版浏览器。这将是个人项目，所以拧他们。与拉斐尔的内联SVGs相互作用也很容易吗？我只能找到你首先定义一个纸张对象然后向该对象添加一些SVG形状的例子。我的画布已经定义好了，我的路径已经全部定义好了。它们已经存在于DOM中。 – myradon 2013-03-05 20:01:56

我不认为它会很容易地与Raphaël一起工作，但我可能是错的。我见过的大部分内容假设你使用Raphaël的API来创建SVG。另一方面D3应该可以正常工作，因为你可以选择你想要的元素并根据某些事件对它们进行转换。 – 2013-03-06 12:11:55

好的。我目前正在抨击如何将这些库与SMIL结合起来。 D3.js或Raphael API不会向我显示任何重新组装animetMotion的内容。由于响应和代码（少数MQ的SVG）越来越混乱，我也使用不同的SVG与MQ。 – myradon 2013-03-07 12:53:51

内嵌SVG动画最佳实践

回答

相关问题