{"action":"created","issue":{"url":"https://api.github.com/repos/ariutta/svg-pan-zoom/issues/109","labels_url":"https://api.github.com/repos/ariutta/svg-pan-zoom/issues/109/labels{/name}","comments_url":"https://api.github.com/repos/ariutta/svg-pan-zoom/issues/109/comments","events_url":"https://api.github.com/repos/ariutta/svg-pan-zoom/issues/109/events","html_url":"https://github.com/ariutta/svg-pan-zoom/issues/109","id":69112644,"number":109,"title":"Issue with Chrome and IE","user":{"login":"Seiifer","id":7030689,"avatar_url":"https://avatars.githubusercontent.com/u/7030689?v=3","gravatar_id":"","url":"https://api.github.com/users/Seiifer","html_url":"https://github.com/Seiifer","followers_url":"https://api.github.com/users/Seiifer/followers","following_url":"https://api.github.com/users/Seiifer/following{/other_user}","gists_url":"https://api.github.com/users/Seiifer/gists{/gist_id}","starred_url":"https://api.github.com/users/Seiifer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Seiifer/subscriptions","organizations_url":"https://api.github.com/users/Seiifer/orgs","repos_url":"https://api.github.com/users/Seiifer/repos","events_url":"https://api.github.com/users/Seiifer/events{/privacy}","received_events_url":"https://api.github.com/users/Seiifer/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ariutta/svg-pan-zoom/labels/bug","name":"bug","color":"fc2929"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2015-04-17T10:29:57Z","updated_at":"2015-04-29T13:00:17Z","closed_at":"2015-04-29T13:00:17Z","body":"Hello there,\r\n\r\nI'm having some weird issues with Chrome and IE. My app works on firefox only at the moment : \r\n\r\nHere is the error I got in console with Chrome : \r\n```console\r\nUncaught TypeError: this.options.svg.createSVGMatrix is not a function\r\nShadowViewport.getCTM @ svg-pan-zoom.js:367\r\nShadowViewport.processCTM @ svg-pan-zoom.js:277\r\nShadowViewport.init @ svg-pan-zoom.js:207\r\nShadowViewport @ svg-pan-zoom.js:179\r\nmodule.exports @ svg-pan-zoom.js:501\r\nSvgPanZoom.init @ svg-pan-zoom.js:556\r\nSvgPanZoom @ svg-pan-zoom.js:512\r\nsvgPanZoom @ svg-pan-zoom.js:1285\r\nwindow.onload @ viewerController.js:182\r\n```\r\n\r\nThis is the corresponding lines of the error : \r\n```javascript\r\n    ShadowViewport.prototype.getCTM = function() {\r\n        var safeCTM = this.options.svg.createSVGMatrix() // line 367\r\n   //     var safeCTM = new Object()\r\n        // Copy values manually as in FF they are not itterable\r\n        safeCTM.a = this.activeState.zoom\r\n        safeCTM.b = 0\r\n        safeCTM.c = 0\r\n        safeCTM.d = this.activeState.zoom\r\n        safeCTM.e = this.activeState.x\r\n        safeCTM.f = this.activeState.y\r\n\r\n        return safeCTM\r\n    }\r\n```\r\n\r\nSo I tried to initialize the variable safeCTM as an object manuelly instead of calling createSVGMatrix(), since every values are set in the function anyway (I think).\r\nBut when I do that I get this error instead : \r\n```console\r\nError: Invalid value for <g> attribute transform=\"matrix(Infinity,0,0,Infinity,NaN,NaN)\"\r\nmodule.exports.setCTM @ svg-pan-zoom.js:1446\r\nShadowViewport.updateCTM @ svg-pan-zoom.js:494\r\nmodule.exports.proxy @ svg-pan-zoom.js:1763\r\n```\r\n\r\n\r\nNow the error with IE : \r\n```console\r\nSCRIPT5007: Unable to get the value of the property  « documentElement » : null or undefined object\r\nsvg-pan-zoom.js, line 1737 character 21\r\n```\r\n\r\nAnd the corresponding code : (I put the whole function to give a more accurate idea of where this is, the line causing the error has a comment with the number of the line)\r\n```javascript\r\n, getSvg: function(elementOrSelector) {\r\n            var element\r\n                , svg;\r\n\r\n            if (!this.isElement(elementOrSelector)) {\r\n                // If selector provided\r\n                if (typeof elementOrSelector === 'string' || elementOrSelector instanceof String) {\r\n                    // Try to find the element\r\n                    element = document.querySelector(elementOrSelector)\r\n\r\n                    if (!element) {\r\n                        throw new Error('Provided selector did not find any elements. Selector: ' + elementOrSelector)\r\n                        return null\r\n                    }\r\n                } else {\r\n                    throw new Error('Provided selector is not an HTML object nor String')\r\n                    return null\r\n                }\r\n            } else {\r\n                element = elementOrSelector\r\n            }\r\n\r\n            if (element.tagName.toLowerCase() === 'svg') {\r\n                svg = element;\r\n            } else {\r\n                if (element.tagName.toLowerCase() === 'object') {\r\n                    svg = element.contentDocument.documentElement; // line 1737\r\n                } else {\r\n                    if (element.tagName.toLowerCase() === 'embed') {\r\n                        svg = element.getSVGDocument().documentElement;\r\n                    } else {\r\n                        if (element.tagName.toLowerCase() === 'img') {\r\n                            throw new Error('Cannot script an SVG in an \"img\" element. Please use an \"object\" element or an in-line SVG.');\r\n                        } else {\r\n                            throw new Error('Cannot get SVG.');\r\n                        }\r\n                        return null\r\n                    }\r\n                }\r\n            }\r\n\r\n            return svg\r\n        }\r\n```\r\n\r\nSo I don't really know what's going on there. Any help would be appreciated.\r\n\r\nRegards"},"comment":{"url":"https://api.github.com/repos/ariutta/svg-pan-zoom/issues/comments/97419209","html_url":"https://github.com/ariutta/svg-pan-zoom/issues/109#issuecomment-97419209","issue_url":"https://api.github.com/repos/ariutta/svg-pan-zoom/issues/109","id":97419209,"user":{"login":"bumbu","id":171178,"avatar_url":"https://avatars.githubusercontent.com/u/171178?v=3","gravatar_id":"","url":"https://api.github.com/users/bumbu","html_url":"https://github.com/bumbu","followers_url":"https://api.github.com/users/bumbu/followers","following_url":"https://api.github.com/users/bumbu/following{/other_user}","gists_url":"https://api.github.com/users/bumbu/gists{/gist_id}","starred_url":"https://api.github.com/users/bumbu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bumbu/subscriptions","organizations_url":"https://api.github.com/users/bumbu/orgs","repos_url":"https://api.github.com/users/bumbu/repos","events_url":"https://api.github.com/users/bumbu/events{/privacy}","received_events_url":"https://api.github.com/users/bumbu/received_events","type":"User","site_admin":false},"created_at":"2015-04-29T13:00:17Z","updated_at":"2015-04-29T13:00:17Z","body":"I don't know how to force angular scope variables to be loaded before the html page. I do believe that it is not possible. \r\n\r\nBut one solution would be to not rely on angular variables to change the object and do it manually whenever you need it. An example is available [here](https://github.com/ariutta/svg-pan-zoom/blob/master/demo/dynamic-load.html)."}}