foreignobject在IE10中不起作用 [英] foreignobject is not working in IE10
本文介绍了foreignobject在IE10中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用foreignobject元素在canvas中绘制HTML文本,在MDN中我可以看到以下链接(参见参考资料),这在Chrome和Mozilla浏览器中工作正常,但在IE10中没有,我使用的是IE10。
I want to draw HTML text in canvas using foreignobject element, In MDN i can see the below link (see reference), this is working fine in Chrome and Mozilla browser but not in IE10, I am using IE10.
浏览器模式:IE10&文件模式:标准
Browser Mode: IE10 & Document Mode: Standards
参考:
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'.
文件:
以下是代码摘录: -
Below is the code snippet : -
<!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>
推荐答案
根据维基百科和 MSDN ,IE11及以下版本不支持< foreignObject>
。
According to Wikipedia and MSDN, IE11 and below do not support <foreignObject>
.
这篇关于foreignobject在IE10中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文