独立 SVG 中的动画（使用 ecmascript（和 jQuery？！））答案

【问题标题】：Animation in stand alone SVG (with ecmascript (and jQuery?!))独立 SVG 中的动画（使用 ecmascript（和 jQuery？！））
【发布时间】：2023-03-09 04:42:01
【问题描述】：

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

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

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

错误：b.style 未定义

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

行：16

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

【问题讨论】：

标签： javascript jquery animation svg

【解决方案1】：

我建议尝试Raphaël 库。该 API 的灵感来自 jQuery，因此您应该对它很熟悉。

另外请记住，IE 不支持 SVG，因此只有 SVG 的解决方案无法在主流浏览器中移植。 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。

【讨论】：

嗨，我很高兴使用 Raphaël。我不需要脚本来跨平台工作。如果它适用于最新版本的歌剧或火狐，那我很好。你知道一个独立的例子吗？因为我找到了内联 SVG 示例，所以到目前为止。
github.com/wout/raphael-svg-import/#readme 有一个 raphael-svg-import，但我自己没有使用过，所以我不能说它有多好。根据您的图像，您可以尝试手动从 SVG 图像中提取路径，如 Dmitry 在我链接到的演讲中所示。

【解决方案2】：

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

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

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

转换器的输出都是Raphael / SVG / VML

【讨论】：

听起来确实是一个合理的解决方案，但我仍然需要 SVG 作为我不喜欢的字符串。如果我将 SVG 从一个文件复制到另一个文件，那么我也可以使用内联 SVG 和 jQuery。也许将它与一些 Ajax 结合使用 javascript 加载单独的 SVG 文件并解析它会很酷。但这对我来说仍然不是很自然。