svg 到 png 不起作用，怀疑 svg 元素差异

Question

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

最终，我的目标是保存平面图的当前 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 中出现错误，非默认命名空间声明不得为空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;

另外，我认为如果我更多地展示这个富文本区域当前的结构，将会有所帮助。这不是我们做的，这是我们使用的产品，我只是想将地图粘贴到描述区域，以便它可以与门票一起使用。我们唯一拥有的访问权限是从表单中的规则触发的js。 ze_body 元素在 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/">

它应该有效。

您可以在此处阅读有关命名空间声明的信息。