Reveal.js 中外部降价中的 SVG 动画答案

【问题标题】：SVG animation in external markdown in reveal.jsReveal.js 中外部降价中的 SVG 动画
【发布时间】：2021-01-08 19:30:01
【问题描述】：

我一直在尝试创建一个包含适度交互动画的reveal.js 演示文稿。我决定最好和最简单的方法是用外部 Markdown 编写演示文稿，并将 SVG 动画合并到几张幻灯片中。我使用 SVG Circus 生成了一个动画，并将代码复制/粘贴到我的外部 markdown 文件中。

我发现的问题是，当将 SVG 动画命令包含到外部 markdown 文件中时，SVG 会显示，但不会动画。我不知道到底出了什么问题。当 SVG 代码包含在直接 .html 文档中时，它会进行动画处理，但会显示在每张幻灯片上——不仅仅是我想要的幻灯片。

所以，我的问题是

是否有推荐的方法将 SVG 动画合并到reveal.js 中？我曾尝试使用 here 找到的动画插件，但无济于事。
我想继续使用外部降价来开发我的幻灯片。为什么markdown会破坏动画？如果故障是由于外部降价引起的，我将如何解决？

我的演示文稿是here，动画应该表现的方式是here。另外，可以在here找到markdown文件和html文件。谢谢。

【问题讨论】：

标签： css svg svg-animate reveal.js

【解决方案1】：

嗯，我一直在努力，我想我发现了潜在的问题。

我使用的生成器 (SVG Circus) 在 ECMAScript 中导出 svg 动画脚本，这似乎与reveal.js 或第三方reveal.js-plugins 页面不兼容。（不过，它在空白 html 页面上运行良好。我觉得它可以运行，但我现在是 JS 文盲。）我尝试使用来自 Raj Goel 的 reveal.js-plugins 的 RevealAnimate 来规避这个问题，但它使用了 svg.js，所以这也很失败。幸运的是，reveal.js、external markdown 和 RevealAnimate 可以很好地与原生 SVG 命令配合使用，所以如果你像其他任何东西一样将它包含在你的 markdown 中，那么用纯 SVG 编写和动画的东西将在reveal.js 中完美地隐藏、显示和排版图片，像这样：

![Alt text.](your_animated_svg.svg)

因此，您要么需要编写自己的原生 SVG 文件，在 svg.js 中编写动画并使用 RevealAnimate，要么使用以纯 SVG 格式导出的生成器。就个人而言，如果您想将交互式 SVG 动画放入演示文稿中，您可能应该坚持使用 RevealAnimate，但如果您只想要动画 SVG，我建议您使用来自 blender 的Freestyle。它可以将 3d 或 2d 动画导出为纯 SVG。

【讨论】：