kineticjs, local svg, drawHitFromCache, Internet Explorer 10 SecurityError -

kineticjs, local svg, drawHitFromCache, Internet Explorer 10 SecurityError -

i took standard drawhitfromcache demo (http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/) , , replaced 1 of images .svg image (gray polygon) .

live demo : http://preview.yw.sk/kineticdrawhit/

source : http://preview.yw.sk/kineticdrawhit/kineticdrawhitsvg.rar

fiddle : http://jsfiddle.net/5cpyj/ - not work since of local images need.

so thing changed src svg image , added 'drawhitfromcache', works in chromefirefox, in net explorer :

kinetic warning: unable draw nail graph cached scene canvas. securityerror

but utilize local image (monkey.svg) no external resource, why pops securityerror ? since of error image drawn not react on mouse enter. png files right.

jq.browser - removed jquery, plugin jquery , + need canvg library fo magic . canvg need @ leat 207 revision fixed draw bug . https://code.google.com/p/canvg/source/detail?r=207 , can download latest svn installed (http://canvg.googlecode.com/svn/trunk/)

solution security error in warious browsers ie10+ , safari, ipad etc, solution utilize canvg create png images current resolution svg images .

var pngfallbackenabled = null; project.pngfallbackcheck = function () { if (pngfallbackenabled == null) { if (typeof enablesvgpngfallback != 'undefined' && enablesvgpngfallback == true && typeof jq.browser != 'undefined' && (jq.browser.mobile == true || jq.browser.msie == true || jq.browser.mozilla == true)) { pngfallbackenabled = true; console.log('png fall-back enabled'); } else { pngfallbackenabled = false; } } homecoming pngfallbackenabled; }; var cachedpngimages = []; var currentgamecanvasratio = null; /** require canvg library*/ project.createpngimagefromsvgimage = function (svglink, width, height, cacheindex) { var extension = svglink.split('.').pop(); if (extension == "png" || extension == "jpg" || extension == "gif" || extension == "jpeg" || extension == "gif") { homecoming svglink; } if (typeof cacheindex != 'undefined' && typeof cachedpngimages[cacheindex] != 'undefined') { homecoming cachedpngimages[cacheindex]; } var canvas = document.getelementbyid("pngdrawercanvas"); var canvascontext = canvas.getcontext('2d'); if (canvas == null) { var canvaselement = document.createelement('canvas'); canvaselement.setattribute("id", "pngdrawercanvas"); canvaselement.setattribute("width", "200"); canvaselement.setattribute("height", "200"); canvaselement.setattribute("style", "display: none"); document.body.appendchild(canvaselement); canvas = document.getelementbyid("pngdrawercanvas"); } if(currentgamecanvasratio == null){ currentgamecanvasratio = window.module.canvas.getcurrentratio(); /*custom function ratio current screen resolution*/ } var imagewidth = math.floor(width * currentgamecanvasratio); var imageheight = math.floor(width * currentgamecanvasratio); canvas.width = imagewidth; canvas.height = imageheight; jq('#pngdrawercanvas').css('width', imagewidth); jq('#pngdrawercanvas').css('height', imageheight); //canvg('pngdrawercanvas', svglink, 0, 0); canvascontext.drawsvg(svglink, 0, 0, imagewidth, imageheight); var img = canvas.todataurl("image/png"); if (typeof cacheindex != 'undefined') { cachedpngimages[cacheindex] = img; } homecoming img; };

svg kineticjs internet-explorer-10 local securityexception