foreignobject 在 IE10 中不起作用答案

【问题标题】：foreignobject is not working in IE10foreignobject 在 IE10 中不起作用
【发布时间】：2013-11-13 09:58:55
【问题描述】：

我想使用 foreignobject 元素在画布中绘制 HTML 文本，在 MDN 中我可以看到以下链接（请参阅参考资料），这在 Chrome 和 Mozilla 浏览器中可以正常工作，但在 IE10 中不能，我使用的是 IE10。

浏览器模式：IE10 & 文档模式：标准

参考： https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

错误：

DOM7000: Access Denied. Resource access is restricted for cross-origin URL: 'blob:7C72C95F-3E3F-4CD6-804C-C2D8CCC06283'.

文件：

下面是sn-p的代码：-

            <!DOCTYPE html>
            <html>
            <body>
            <p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
            <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
                         "<foreignObject width='100%' height='100%'>" +
                           "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
                             "<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
                           "</div>" +
                         "</foreignObject>" +
                       "</svg>";
            var DOMURL = self.URL || self.webkitURL || self;
            var img = new Image();
            var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
            var url = DOMURL.createObjectURL(svg);
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
                DOMURL.revokeObjectURL(url);
            };
            img.src = url;
            </script>
            </body>
            </html>

【问题讨论】：

标签： javascript html internet-explorer svg html5-canvas

【解决方案1】：

根据Wikipedia和MSDN，IE11及以下不支持<foreignObject>。

【讨论】：

谢谢，如果我们可以在 IE10 中实现同样的功能？
这很不幸，foreignObject 是获得 SVG 支持以在
中将 E-Z 文本处理为 html 等的好方法。在声明模式下与通过 JavaScript 摆弄文本相比。
我对 foreignobject 进行了一些测试，它可以在我的 IE9 中工作。 dl.dropboxusercontent.com/u/14316104/foreignobject/pages/… 为什么我的例子有效？ IE9 是否有最低限度的支持？
因为在 html 中，未知标签的内容可能会呈现为文本。

【解决方案2】：

你可以试试 Chromeframe，但看起来他们明年就要停用了 :(

https://developers.google.com/chrome/chrome-frame/

【讨论】：

【解决方案3】：

Html2canvas（测试版）似乎在 Explorer 10 中工作（至少在我的虚拟机中） http://html2canvas.hertzen.com/

示例：http://html2canvas.hertzen.com/examples.html

【讨论】：