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

Question

我是Raphael的新手，想就如何构建我的应用程序做一些基本的问题：

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

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

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

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

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

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

Answer 1

您可以使用https://github.com/wout/raphael-svg-import或https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic这样的插件来帮助您入门。我想你可能需要做一些额外的工作来应对团队和拉斐尔。

编辑澄清，我不确定你的其他评论是什么意思拉斐尔模式从图形编辑器。您可以将图形作为直接SVG并导入。我不确定为什么需要支持Raphael脚本。

Answer 2

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

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

svg2path some.svg

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

可在github和npm上找到。

Answer 3

VectorEditorJS对您来说是个不错的起点。请查看editor.js以构建或重建您自己的功能。Here's演示。

修改

SVGEdit演示有代码将矢量保存为svg。您可以查看代码。