在浏览器中生成，查看和保存SVG客户端
[英]Generating, viewing, and saving SVG client-side in browser
问题描述
我正在编写一个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>
问题
打开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!");
}
但是，在此函数执行此操作后，加载的文件将“擦除”对其所做的所有更改并恢复到其原始状态。 （ 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的定义放在 onload处理程序中。 这样可行。
但是仍然觉得应该有一种从头开始构建新文档的方法。 “修改空白SVG”比“修改about:blank HTML”更好，但这真的是最好的方法吗？
缺少标记
（这似乎只是Firefox的一个问题，而不是Chromium。）
marker-mid样式在预览图像marker-mid工作正常，但在打开的SVG中不起作用。 我不知道为什么。 编辑：修改SVG文件而不是about:blank没有此问题。 我要提交一个错误，但我已经怀疑他们会说“不要尝试动态地将HTML文件转换为SVG文件”。
保存生成的SVG
我不知道该怎么做。 一些诱人的提示似乎说它与Blob有关，但是我没有发现任何解决方法来保存生成的SVG文件客户端，我不明白它们做得多好以使它能够工作我。
任何帮助，建议，建议或更正？
3 个解决方案
解决方案1
8 已采纳 2014-05-11 07:05:24
我使用现代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提交了一个错误。
解决方案2
2 2015-05-28 23:57:11
...并在同一窗口中显示SVG，使用：
window.location = url;
代替
window.open(url,...
另请注意， Titel标记很重要，因为在保存svg文件时，它用作默认文件名。
解决方案3
0 2014-08-27 06:38:24
我不确定我是否正确理解你的问题，但由于我正在研究类似的问题，我建议如下（希望它适合你）。 使用下面的代码示例，您不应该使用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();
}
某些公司会阻止客户端浏览器上的客户端Javascript脚本吗？
[英]do some companies block client-side Javascript scripting on client-side browser?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.