1

HTML page SVG definition 

<embed id="sv" src="test.svg"  type="image/svg+xml" width="1720" height="938">

Javascript :

//var eID = document.getElementById("ENV"); 
var S = document.getElementById("sv");
var SD;
S.addEventListener('load', function()
{   
    SD = S.contentDocument;
    SD = S.getSVGDocument();
    // Operate upon the SVG DOM here
});

as you see, my SVG is defined by an embed element, When i tried to access this SVG object, i get undefined in Chrome (SD variable in above code), But it is working fine in Firefox and I can access the elements inside SVG.

So, the issue is only with Chrome. Whats the problem and how to resolve it?

S.Serpooshan
  • 6,368
  • 2
  • 29
  • 53
Parthiban
  • 11
  • 1

1 Answers1

2

It is because of a security restriction in Chrome which prevent access to external SVG by javascript when you open an html page through file system not from a local or online server.

the Error will be:

Uncaught DOMException: Failed to execute 'getSVGDocument' on 'HTMLEmbedElement': Blocked a frame with origin "null" from accessing a cross-origin frame.

you can use a local server, or disable the Same-Origin Policy by closing chrome and restart it with the --disable-web-security command line argument (see this answer).

Note that this will not occur in production when you publish your files to an online host!

Also, the Firefox does not have such limitation. As mentioned in comments, It has a simple limitation: the files should be in same folder (or a sub-folder beside the page you have opened)

Community
  • 1
  • 1
S.Serpooshan
  • 6,368
  • 2
  • 29
  • 53
  • @RobertLongson yes, but Chrome will fire that error even when the files are in same folder (or a sub-folder inside) – S.Serpooshan Feb 27 '17 at 07:51