Javascript 在浏览器中生成、查看和保存SVG客户端

我正在编写一个小的HTML5+JS工具来生成SVG图像。在这样做的过程中，我遇到了许多问题，虽然我对其中大多数问题都有解决办法，但至少有一种情况下，我觉得一定有更好的办法。还有一些事情仍然不起作用

目前，这是我自己使用的，所以跨浏览器兼容性不是一个问题；只要它在Firefox（首选）或Chromium中工作，一切都很好。不过，一旦它正常工作，我会将其放到网上，因此兼容性警告将受到欢迎

目标

所有处理应在客户端完成；事实上，在此阶段，所有内容都是本地

文件：//

，不涉及web服务器

使用脚本化表单元素将文本和元素添加到SVG图像（内嵌在HTML中）

单击SVG（缩小为“预览”大小），在新窗口/选项卡中打开修改后的SVG

使用一些易于访问的方法（即不是“DOM检查器，复制到文本文件，保存”）将SVG保存到磁盘

测试用例 （）

但是，在这个函数完成它的工作之后，加载的文件会“擦除”对它所做的所有更改，并恢复到原始状态。（在Firefox中，当页面被“擦除”时，警报框本身在没有用户操作的情况下会消失。在Chromium中，警报框会挂起，但擦除会在它被解除后发生。）

这不是将节点重租绑定到新窗口的

onload

处理程序的问题是的。我第一次尝试时犯了一个错误。以下是我所做的：

我应该做的是将

blank\u root

的定义放入

onload

处理程序中。这很有效

尽管如此，我仍然觉得应该有一种从头开始构建新文档的方法。“修改空白SVG”比“修改

关于：blank

HTML”要好，但这真的是最好的方法吗

缺失标记 （这似乎只是Firefox的问题，而不是Chromium的问题。）

marker mid

样式在预览图像中工作正常，但在打开的SVG中则不行。我不知道为什么Edit:修改SVG文件而不是

about:blank

不会出现此问题。我要去提交一个bug，但我已经怀疑他们会说“不要尝试将HTML文件动态转换为SVG文件”

保存生成的SVG 我不知道怎么做。一些诱人的提示似乎表明这与BLOB有关，但我没有发现任何能够在客户端保存生成的SVG文件的方法，而且我也不明白他们做得如何，才能让它适合我

---

有任何帮助、建议、建议或更正吗？

我已经用现代HTML5API解决了自己的问题

新的

show\u svg（）

函数如下所示：

浏览器自己的保存功能将在这个新窗口上工作，它不涉及对其他文件的任何“感觉”怪异或有黑客行为的修改。（将SVG序列化后再在浏览器中查看似乎有点奇怪，但在HTML5下这似乎是正确的做法。）

---

唯一未解决的问题是标记消失，事实上，问题变得更糟，因为现在

元素也不起作用！但是，它们仍然存在并且在代码中起作用，因此一旦SVG保存到文件中，文件中的所有内容都可以正常工作。我也向Mozilla提交了一个bug。

我不确定是否正确理解了您的问题，但由于我正在处理一个类似的问题，我建议如下（希望它对您有效）。对于下面的代码示例，您不应该对use标记有任何问题

function show_svg(evt)
{
  var svg = document.getElementById("output-pic");
  var serializer = new XMLSerializer();
  var ser = serializer.serializeToString(svg);
  var w = window.open();
  w.document.open();
  w.document.write(ser);
  w.document.close();
}

---

…要在同一窗口中显示SVG，请使用：

window.location = url;

而不是

 window.open(url,...

---

还请注意，Titel标记很重要，因为它用于保存svg文件时的默认文件名。

当然，加载到弹出窗口中的文档将替换加载之前可能放入文档中的任何内容……是的，一个合适的

load

处理程序应该是解决这个问题的方法。@CBroe:谢谢。你的评论使我走上了正确的轨道；当我试着将它放入

onload

时，我犯了一个错误。仍然不理想，但这是进步！好奇的是，像snapSVG或Raphael这样的库在您的用例中不是很有用吗？@NicholasKyriakides：也许吧，但是SVG的实际更改包括（a）通过元素放置或删除定义的图标，以及（b）编辑文本。考虑到这一点，以及我在意识到之前就已经准备好了基本代码（直到现在我才知道snapSVG），我不确定他们在这个阶段会添加什么。除非他们可能已经将修改后的SVG保存到本地文件功能中……作为记录，问题在于

blob:

URL（目前）不允许使用片段标识符。相关的Mozilla bug是

function show_svg(evt) {
    var svg = document.getElementById("output-pic");
    var serializer = new XMLSerializer();
    var svg_blob = new Blob([serializer.serializeToString(svg)],
                            {'type': "image/svg+xml"});
    var url = URL.createObjectURL(svg_blob);

    var svg_win = window.open(url, "svg_win");
}

function show_svg(evt)
{
  var svg = document.getElementById("output-pic");
  var serializer = new XMLSerializer();
  var ser = serializer.serializeToString(svg);
  var w = window.open();
  w.document.open();
  w.document.write(ser);
  w.document.close();
}

window.location = url;

 window.open(url,...