在画布上绘制 DOM 元素（SVG 作为外部元素）在 Internet Explorer 中不起作用答案

【问题标题】：Drawing DOM elements (SVGs as foreign elements) on a canvas doesn't work in Internet Explorer在画布上绘制 DOM 元素（SVG 作为外部元素）在 Internet Explorer 中不起作用
【发布时间】：2015-05-03 08:50:42
【问题描述】：

我已成功使用this 技术，从画布上的 DOM 元素（例如输入和选择字段）绘制用户输入，并将其作为图像提供。

这在 Chrome、Safari 和 Firefox 中运行良好，但在 Internet Explorer 11 上，我收到以下错误：

XML5634：此元素上已存在同名属性。 Line: 1, Column 242 ，当我在整个网站上尝试时发达。当 name 和 id 字段上存在重复值时，应该会显示此错误，但我检查了 DOM 上的每个元素，但没有。
意外调用方法或属性访问。，当我尝试在这个小提琴上重现整个过程时：http://jsfiddle.net/5mf4n7v3/。从调试器看来，当调用ctx.drawImage() 时会发生错误。

基本上，我想在这个小提琴中做的是在画布上绘制 SVG 黄色圆圈图像和我提供的任意 SVG。这似乎适用于除 IE11 之外的所有主要浏览器。有没有其他人遇到过同样的问题并且知道一些解决方法？

【问题讨论】：

IE 不支持<foreignObject> 标签。
所以没有解决方法？
除非您将 Chrome、Safari、Firefox 和 Opera 视为解决方法，否则不会。
凹凸。同样的问题在这里使用canvg从IE11导出一些SVG和PNG。适用于其他浏览器。
有人找到解决方案了吗？

标签： jquery html internet-explorer svg draw

【解决方案1】：

IE 10 不支持<foreignObject> 标签，但你不需要它在画布上绘制文本，我在这里重写你的小提琴，所以现在它可以在 IE 中工作 - http://jsfiddle.net/skyr9999/5hhpo76h

【讨论】：