我正在编写一个 HTML5+JS 的小工具来生成 SVG 图像。我在这样做时遇到了很多问题，虽然我对大多数问题都有解决方法，但至少在一种情况下，我觉得必须有更好的方法。还有一些事情仍然只是aren't在职的。
目前，这是我自己使用的，因此跨浏览器兼容性不是问题；只要它能在 Firefox（首选）或 Chromium 中运行，就没有问题。不过，一旦它工作正常，我想将其放在网上，因此兼容性警告将不胜感激。
Goals
- 所有处理都应在客户端完成；事实上，现阶段一切都是本地化的
file://，不涉及网络服务器。
- 使用脚本化表单元素将文本和元素添加到 SVG 图像（内嵌在 HTML 中）。
- 单击 SVG（缩小到“预览”大小）以在新窗口/选项卡中打开修改后的它。
- 使用一些易于访问的方法（即不是“DOM 检查器、复制到文本文件、保存”）将 SVG 保存到磁盘。
测试用例
https://gist.github.com/perey/1d352a790f749aa05a8b https://gist.github.com/perey/1d352a790f749aa05a8b (看到它的实际应用 http://htmlpreview.github.io/?https://gist.github.com/perey/1d352a790f749aa05a8b/raw/212a1b3bcf03bc7937837768089865da94075934/svg-test.html)
<!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>
Issues
打开 SVG
Opening about:blank，删除它的 document 元素，并添加 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!");
}
}
What I 应该完成了定义blank_root inside the onload处理程序。这样可行。
不过，仍然感觉应该有一种方法可以从头开始构建新文档。 “修改空白 SVG”比“修改about:blankHTML”，但这真的是最好的方法吗？
缺少标记
（这似乎只是 Firefox 的问题，而不是 Chromium 的问题。）
The marker-mid样式在预览图像中工作正常，但在打开的 SVG 中则不然。我不知道为什么。Edit:修改 SVG 文件而不是about:blank没有这个问题。我准备提交一个 bug，但我已经怀疑他们会说“不要尝试将 HTML 文件动态转换为 SVG 文件”。
保存生成的 SVG
我不知道该怎么做。一些诱人的提示似乎表明这与 Blob 有关，但我没有发现任何可以解决在客户端保存生成的 SVG 文件的问题，而且我不明白他们做得足够好以使其适用于我。
有什么帮助、建议、忠告或更正吗？
