目标

Question

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

目前，这是我自己使用的，因此跨浏览器兼容性不是问题;只要它适用于Firefox（首选）或Chromium，它就是好的。但是，一旦它正常工作，我想在网上贴上它，所以兼容性警告将不胜感激。

目标

所有处理都应在客户端完成;实际上，在这个阶段，所有内容都是本地file://，不涉及任何Web服务器。
使用脚本化表单元素将文本和元素添加到SVG图像（在HTML中内联）。
点击SVG（缩小到“预览”大小），在新窗口/标签中打开它，修改后。
使用一些易于访问的方法（即不是“DOM检查器，复制到文本文件，保存”）将SVG保存到磁盘。

测试用例

https://gist.github.com/perey/1d352a790f749aa05a8b（see it in action）

<!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>

问题

打开SVG

打开about:blank，删除其文档元素，添加SVG元素，感觉非常黑客。然而，~~没有其他工作~~我只找到了一种在新窗口中构建文档的更好方法（见下文）。

特别是，我尝试加载准系统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 的定义放在<{em} <{1}}处理程序中。这很有效。

但仍然觉得应该有一种从头开始构建新文档的方法。 “修改空白SVG”比“修改onload HTML”更好，但这真的是最好的方法吗？

缺少标记

（这似乎只是Firefox的一个问题，而不是Chromium。）

about:blank样式在预览图像中工作正常，但在打开的SVG中没有。我不知道为什么。修改：修改SVG文件而不是marker-mid没有此问题。我要提交一个错误，但我已经怀疑他们会说“不要尝试将HTML文件动态转换为SVG文件”。

保存生成的SVG

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

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

Answer 1

我使用现代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");
}

浏览器自己的保存功能将在这个新窗口上运行，并且不会对其他“感觉”奇怪或骇客的文件进行任何修改。（将SVG序列化只是为了再次在浏览器中查看它似乎有点奇怪，但这似乎是HTML5下的正确的东西。）

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

Answer 2

...要在相同的窗口中显示SVG，请使用：

window.location = url;

而不是

 window.open(url,...

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

Answer 3

我不确定我是否正确理解你的问题，但由于我正在研究类似的问题，我建议如下（希望它适合你）。使用下面的代码示例，您不应该使用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客户端

目标

测试用例

问题

打开SVG

缺少标记

保存生成的SVG

3 个答案: