我很难弄清楚为什么两个不同的svg会导致我的JavaScript在一个示例中工作，而在另一个示例中却不能工作。我只交换了两个例子中的svg元素，一个工作，一个不工作。下面是两个jsFiddles中的代码。我从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中得到一个错误，非默认名称空间声明不能有空URI。行：1，column 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