独立SVG中的动画(带ecmascript(和jQuery ?!))

时间:2011-02-19 16:27:38

标签: javascript jquery animation svg

我使用inkscape创建了一个SVG,现在我想根据一些逻辑添加一些动画。

我非常了解JavaScript并且具有jQuery的基本经验。所以我认为我也可以用jQuery为我的SVG制作动画。

谷歌找到了无数关于如何使用嵌入在XHTML中的内联SVG的教程,但我有一个独立的SVG和Firefox抱怨

  

错误:b.style未定义

     

源文件:[...] jquery.js

     

行:16

有没有办法让jQuery工作?或者,作为替代方案,您是否可以推荐另一个我可以使用的JavaScript库来实现此目的?

2 个答案:

答案 0 :(得分:2)

我建议您尝试使用Raphaël库。 API的灵感来自jQuery,所以你应该对它很熟悉。

另请注意,IE不支持SVG,因此只有SVG-only解决方案才能在主流浏览器中移植。 Raphaël为您照顾它 - 它在IE上使用VML,在其他浏览器上使用SVG。它适用于Firefox 3.0 +,Safari 3.0 +,Chrome 5.0 +,Opera 9.5+和Internet Explorer 6.0 +。

您可以使用Inkscape创建SVG,然后将路径导入Raphaël代码。请参阅JSConf 2010上的the talk by Dmitry Baranovskiy

答案 1 :(得分:1)

我同意最后的答案。将您的SVG放入转换器

http://irunmywebsite.com/raphael/svgsource.php

这会将你的SVG放到html4中,它可以在除android之外的所有浏览器上运行。 您可以使用Raphael为路径设置动画。

转换器的输出全部是Raphael / SVG / VML