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

我正在编写一个HTML5 + JS工具来生成SVG图像.我这样做遇到了很多问题,虽然我对大多数问题都有解决方法,但至少在一个案例中我觉得必须有更好的方法.然后还有一些事情仍然没有奏效.

目前,这是我自己使用的,因此跨浏览器兼容性不是问题; 只要它适用于Firefox(首选)或Chromium,它就是好的.一旦它正常工作,我想在网上坚持下去,所以兼容性警告将不胜感激.

所有处理都应该在客户端完成; 事实上,在这个阶段,一切都是本地的file://,没有涉及的Web服务器.

使用脚本化表单元素将文本和元素添加到SVG图像(在HTML中内联).

单击SVG(缩小到"预览"大小)以在新窗口/选项卡中打开它(已修改).

使用一些易于访问的方法(即不是"DOM检查器,复制到文本文件,保存")将SVG保存到磁盘.

https://gist.github.com/perey/1d352a790f749aa05a8b(见行动)

  
    
    
    
    
  
  
    

      
      
    
    

      Text: 
    
  

打开SVG

打开about:blank,删除其文档元素,并添加SVG元素,感觉非常hacky.然而,没有其他工作,我只找到了一个在新窗口中构建文档的更好的方法(见下文).

特别是,我尝试加载一个准系统SVG文件并添加预览SVG的所有子节点,如下所示:

function show_svg() {
    var svg_win = window.open("blank.svg", "svg_win");
    var embedded_svg = document.getElementById("output-pic");
    var transplanted_svg = svg_win.document.importNode(embedded_svg, true);
    var blank_root = svg_win.document.documentElement;

    while (transplanted_svg.hasChildNodes()) {
        blank_root.appendChild(transplanted_svg.firstChild);
    }
    svg_win.alert("Done!");
}

但是,在此函数执行此操作后,加载的文件将"擦除"对其所做的所有更改并恢复到其原始状态.(这alert是为了强调这一事实:在Firefox中,当页面被"擦除"时,警报框本身就会消失,而无需用户操作.在Chromium中,警告框会挂起,但擦除会在它被解除之后发生.)

这不是将节点重新绑定到新窗口的onload处理程序的问题. 是的.我第一次尝试时犯了一个错误.这是我做的:

function show_svg() {
    var svg_win = window.open("blank.svg", "svg_win");
    var embedded_svg = document.getElementById("output-pic");
    var transplanted_svg = svg_win.document.importNode(embedded_svg, true);
    var blank_root = svg_win.document.documentElement;

    svg_win.onload = function () {
        while (transplanted_svg.hasChildNodes()) {
            blank_root.appendChild(transplanted_svg.firstChild);
        }
        svg_win.alert("Done!");
    }
}

我应该做的是把处理程序blank_root 内部的定义onload.这样可行.

但是仍然觉得应该有一种从头开始构建新文档的方法."修改空白SVG"比"修改about:blankHTML" 要好,但这真的是最好的方法吗？

缺少标记

(这似乎只是Firefox的一个问题,而不是Chromium.)

该marker-mid造型预览图像中正常工作,但不是在打开SVG.我不知道为什么.编辑:修改SVG文件而about:blank不是没有此问题.我要提交一个错误,但我已经怀疑他们会说"不要尝试动态地将HTML文件转换为SVG文件".

保存生成的SVG

我不知道该怎么做.一些诱人的提示似乎说它与Blob有关,但是我没有发现任何解决方法来保存生成的SVG文件客户端,我不明白它们做得多好以使它能够工作我.

任何帮助,建议,建议或更正？