Foreignobject nie działa w IE10

Question

Nov 02, 2013, 07:54 AM

html5 html5-canvas internet-explorer svg javascript

Foreignobject nie działa w IE10

Chcę narysować tekst HTML na płótnie, używając elementu foreignobject, W MDN widzę poniższy link (patrz odnośnik), działa to dobrze w przeglądarce Chrome i Mozilla, ale nie w IE10, używam IE10.

Tryb przeglądarki: IE10 i tryb dokumentu: standardy

Odniesienie:https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

Błąd:

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

plik:

Poniżej znajduje się fragment kodu: -

            <!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>