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

coder 2023-08-10 原文

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

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

目标

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

~~这不是将节点重新绑定(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/

中生 javascript 34 svg code html client-side

有关javascript - 在浏览器中生成、查看和保存 SVG 客户端的更多相关文章

ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby - 在 Ruby 中用键盘诅咒数组浏览 - 2
我正在尝试在Ruby中制作一个cli应用程序，它接受一个给定的数组，然后将其显示为一个列表，我可以使用箭头键浏览它。我觉得我已经在Ruby中看到一个库已经这样做了，但我记不起它的名字了。我正在尝试对soundcloud2000中的代码进行逆向工程做类似的事情，但他的代码与SoundcloudAPI的使用紧密耦合。我知道cursesgem，我正在考虑更抽象的东西。广告有没有人见过可以做到这一点的库或一些概念证明的Ruby代码可以做到这一点？最佳答案我不知道这是否是您正在寻找的，但也许您可以使用我的想法。由于我没有关于您要完成的工作
ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2
我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。最佳答案我不太明白你的问题。我假设您想检查
ruby-on-rails - 浏览 Ruby 源代码 - 2
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2
我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。最佳答案虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功
ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2
我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 在 ruby 中生成一个进程，捕获 stdout，stderr，获取退出状态 - 2
我想从rubyrake脚本运行一个可执行文件，比如foo.exe我希望将foo.exe的STDOUT和STDERR输出直接写入我正在运行rake任务的控制台.当进程完成时，我想将退出代码捕获到一个变量中。我如何实现这一目标？我一直在玩backticks、process.spawn、system但我无法获得我想要的所有行为，只有部分更新:我在Windows上，在标准命令提示符下，而不是cygwin 最佳答案 system获取您想要的STDOUT行为。它还返回true作为零退出代码，这可能很有用。$?填充了有关最后一次system调
ruby-on-rails - 将保存回调添加到单个 ActiveRecord 实例，可以吗？ - 2
是否可以为单个ActiveRecord实例添加回调？作为进一步的限制，这是继续使用库，所以我无法控制该类(除了对其进行猴子修补)。这或多或少是我想做的:defdo_something_creazymessage=Message.newmessage.on_save_call:do_even_more_crazy_stuffenddefdo_even_more_crazy_stuff(message)puts"Message#{message}hasbeensaved!Hallelujah!"end 最佳答案你可以通过在创建对象后立
ruby - 正则表达式 - 保存重复捕获的组 - 2
这就是我做的a="%span.rockets#diamonds.ribbons.forever"a=a.match(/(^\%\w+)([\.|\#]\w+)+/)putsa.inspect这是我得到的#这就是我想要的#帮助？我尝试过但失败了:( 最佳答案通常，您不能获得任意数量的捕获组，但如果您使用扫描，您可以为您想要捕获的每个标记获得一个匹配:a="%span.rockets#diamonds.ribbons.forever"a=a.scan(/^%\w+|\G[.|#]\w+/)putsa.inspect["%span","