个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 15:35:24 25 4
gpt4 key购买 nike

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

目前，这是供我自己使用的，所以跨浏览器兼容性不是问题；只要它能在 Firefox(首选)或 Chromium 中运行，一切都很好。不过，我想在它正常工作后将其在线发布，因此不胜感激兼容性警告。

目标

  1. 所有处理都应在客户端完成；事实上，在这个阶段，一切都是本地 file://，不涉及网络服务器。
  2. 使用脚本化表单元素将文本和元素添加到 SVG 图像(在 HTML 中内嵌)。
  3. 单击 SVG(已缩小为“预览”大小)以在新窗口/选项卡中打开经过修改的 SVG。
  4. 使用一些易于访问的方法(即不是“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 中，警告框会挂起，但删除发生在之后它被驳回了。)

这不是将节点重新绑定(bind)到新窗口的 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:blank HTML”要好，但这真的是最好的方法吗？

缺少标记

(这似乎只是 Firefox 的问题，而不是 Chromium 的问题。)

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

保存生成的SVG

我不知道该怎么做。一些诱人的提示似乎表明它与 Blob 有关，但我没有发现任何可以解决在客户端保存生成的 SVG 文件的问题，而且我不明白他们做得很好以使其适用于我。

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

最佳答案

我已经使用现代 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 下的正确做法。)

唯一 Unresolved 问题是消失的标记——事实上，问题变得更糟，就像现在一样<use>元素也不行!但是，它们仍然存在并在代码中起作用，所以一旦将 SVG 保存到文件中，文件中的所有内容都可以正常工作。我也向 Mozilla 提交了错误。

关于javascript - 在浏览器中生成、查看和保存 SVG 客户端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23582101/

25 4 0
文章推荐： android:WAITING连接时显示进度对话框
文章推荐： c - 有没有办法在不向下滚动的控制台中打印一些东西？ (在 C 中)
文章推荐： android - 更改屏幕方向时 EditText 中的值错误
文章推荐： c - 勾股定理测试不起作用？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com