javascript - svg 到 png 不工作，怀疑 svg 元素差异

Question

我无法弄清楚为什么两个不同的 svg 会导致我的 javascript 在一个实例中工作，但在另一个实例中却不能。我只换掉了两个示例中的 svg 元素，一个有效，一个无效。这是两个 jsFiddle 中的代码。我从 here 得到的工作示例.

最终，我的目标是保存平面图的当前 svg 元素，并将转换后的 png 作为内联 img 插入到富文本区域中。就好像您截取了平面图的裁剪屏幕截图，并将其粘贴到您在服务台网站上看到的富文本区域。我只是无法转换为 png。

工作:JsFiddle

不工作:JsFiddle

这是 js，我无法添加 svg 代码，否则它会使我超出 Stackoverflow 的字符限制。

    var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var png = canvas.toDataURL("image/png");
  document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
  DOMURL.revokeObjectURL(png);
};
img.src = url;

编辑:

此后我决定省略 png/canvas 转换，并尝试将 svg 的序列化字符串直接放置到富文本区域，但它在 IE 中出错，Non-default namespace declarations must not有一个空的 URI。第 1 行，第 142 列

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));

var img = new Image();

var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString); 
img.onload = function() {

    document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>';

};
img.src = url;

此外，我认为如果我展示更多有关富文本区域当前位置的结构，将会有所帮助。这不是我们做的，它是我们使用的产品，我只是想让 map 粘贴到描述区域，这样它就可以与票一起使用。我们唯一的访问权限是从表单中的规则触发的js。 Screenshot of ze_body element as it stands in the DOM

Answer 1

它来自你的命名空间声明:

更改 xmlns:NS1=""NS1:xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:NS2=""NS2:xmlns:cc="http://creativecommons.org/ns#"xmlns:NS3=""NS3:xmlns:dc="http://purl.org/dc/elements/1.1/"

到 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:cc="http://creativecommons.org/ns#"xmlns:dc="http://purl.org/dc/elements/1.1/"> 和它 should work .

另请注意，由于您正在使用 XMLSerializer().serializeToString()，因此您不需要创建 blob 和 objectURL，只能传data:image/svg+xml； charset=utf8, " 和 encodeURIComponent(svgString) 作为图片的 url。(fiddle)。

ps:您可以阅读有关命名空间声明的信息 here .