javascript - 预绘制 Raphael 屏幕，将其保存到文件并在运行时加载

Question

我是 Raphael 的新手，想询问一些有关如何构建我的应用程序的基本问题:

我需要在可视化图形编辑器上绘制模型并将它们保存到文件中(我称之为屏幕)。在运行时，我需要加载这些屏幕并使用 Ajax 从服务器数据中为它们设置动画。

使用 SVG，我可以使用这个简单的命令加载数据:

<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>

此外，在 SVG 上，我们可以使用一些图形可视化编辑器，这就是构建屏幕所需的全部内容。其余的 JavaScript 代码用于获取元素 id 并在运行时基于 ajax 调用更改其属性以获取服务器数据。

由于旧浏览器不支持 SVG，一个自然的选择是使用 Raphael，但我不知道是否有支持 Raphael 脚本语言的可视化图形编辑器以及如何在运行时保存/加载这些脚本。

那么，可视化编辑模型、将它们保存到文件并使用 Raphael 实时加载的最佳方法是什么？

Answer 1

Ian 的答案是一种解决方案。另一种方法是将 SVG 文档转换为 Raphael 可以理解的数据结构。

对于相对简单的 SVG 图像，您可以使用 svg2path 。它将 SVG 文件(或来自 URL 的 svg)转换为可以加载到 Raphael 中的路径。从文档中，在命令行上运行以下命令:

svg2path some.svg

生成一个名为 some.path 的路径文件，可以在 Raphael 中加载(大概使用 paper.path() 方法)。

可通过github获取和 npm .