使用SVG在org-reveal幻灯片中现实动态图表

org-reveal可以使用org-mode创建幻灯片。幻灯片以HTML文档的形式展现，使用reveal.js实现动画。

reveal.js允许逐步地显示页面中的部分片段，比如项目符号列表之类。

它还可以将动态图展示为reveal.js片段，前提是这些图作为嵌入的SVG图像包含在HTML中。

在SVG元素中添加 class="fragment" (及其变体，包括 data-fragment-index 属性)，可以使用与常规项目符号片段相同的JS动作来展示图表的动画部分。

技巧是在org-mode源中使用以下代码来将SVG图标嵌入到HTML源代码中:

#+BEGIN_EXPORT html
<svg ...> 
...
</svg> 
#+END_EXPORT

我是从这个演示 中获得灵感的，它展示了动态现实SVG内容的方法。

到目前为止，我已经开始用inkscape编辑图标，最后将整个<svg>标记从保存的inkscape文件复制到org文件的 #+BEGIN_EXPORT 嵌入式HTML中。

您可以在https://olberger.gitlab.io/org-teaching/slides 文档中看到这样一个动画的演示。(幻灯片26页:“SVG片段显示”)。

希望这个有帮助。