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

Question

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

Tim*_*ick 6 javascript html5 svg client-side

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

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

目标

所有处理都应该在客户端完成; 事实上,在这个阶段,一切都是本地的file://,没有涉及的Web服务器.
使用脚本化表单元素将文本和元素添加到SVG图像(在HTML中内联).
单击SVG(缩小到"预览"大小)以在新窗口/选项卡中打开它(已修改).
使用一些易于访问的方法(即不是"DOM检查器,复制到文本文件,保存")将SVG保存到磁盘.

测试用例

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>SVG Generator</title>
    <style type="text/css">
      figure {
        width: 45%;
        float: right;
      }
      #output-pic {
        border: thin solid green;
        cursor: pointer;
      }
      form {
        width: 45%;
        float: left;
      }
    </style>
    <script>
      window.onload = function() {
        document.getElementById("input-box").oninput = update_text;
        document.getElementById("output-pic").onclick = show_svg;
        update_text();
      }
      function update_text() {
        var input_elem = document.getElementById("input-box");
        var output_elem = document.getElementById("changeable-text");
        output_elem.textContent = input_elem.value;
      }
      function show_svg() {
        var svg_win = window.open("", "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.document.removeChild(blank_root);
        svg_win.document.appendChild(transplanted_svg);
      }
    </script>
  </head>
  <body>
    <figure role="img" aria-labelledby="preview-caption">
      <figcaption id="preview-caption">Preview <small>(click for full
        size)</small></figcaption>
      <svg id="output-pic"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           version="1.1" width="640px" height="480px"
           viewBox="0 0 640 480" preserveAspectRatio="xMinYMin">
        <title>A test SVG file</title>
        <defs>
          <style type="text/css">
            text {
              font-family: serif;
              stroke: none;
              fill: red;
            }
            .underline {
              stroke: blue;
              stroke-width: 1;
              fill: none;
              marker-mid: url(#arrow);
            }
          </style>
          <marker id="arrow"
                  viewBox="-3 -3 6 6" orient="auto"
                  markerUnits="strokeWidth"
                  refX="0" refY="0"
                  markerWidth="6" markerHeight="6">
            <path d="M0,0 -3,-3 3,0 -3,3 Z"/>
          </marker>
        </defs>
        <text id="changeable-text" text-anchor="middle" font-size="40"
              x="320" y="240"></text>
        <path class="underline" d="M10,250 h310 310"/>
      </svg>
    </figure>
    <form>
      <label>Text: <input id="input-box"/></label>
    </form>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

问题

打开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!");
}

Run Code Online (Sandbox Code Playgroud)

但是,在此函数执行此操作后,加载的文件将"擦除"对其所做的所有更改并恢复到其原始状态.(这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!");
    }
}

Run Code Online (Sandbox Code Playgroud)

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

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

缺少标记

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

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

保存生成的SVG

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

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

Answer 1

Tim*_*ick 8

我使用现代HTML5 API解决了自己的问题.

新show_svg()功能如下所示:

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");
}

Run Code Online (Sandbox Code Playgroud)

浏览器自己的保存功能将在这个新窗口上运行,并且它不涉及对"感觉"奇怪或黑客的其他文件的任何修改.(将SVG序列化只是为了再次在浏览器中查看它似乎有点奇怪,但这似乎是HTML5下的正确的东西.)

唯一尚未解决的问题是消失的标记 - 事实上,问题变得更糟,因为现在<use>元素也不起作用!但是,它们仍然存在并且在代码中起作用,因此一旦将SVG保存到文件中,文件中的所有内容都可以正常工作.而且我也向Mozilla提交了一个错误.

归档时间：	11 年，7 月前
查看次数：	4556 次
最近记录：	10 年，6 月前