0

I have a project that loads an external SVG file with: Snap.load("assets/svg/drawing.svg", function(f) { . . . or at least it should.  It works fine in Safari (on OS X), but my preferred browser for SVG is Google Chrome. Chrome fails to load the SVG file and throws the following
Console errors:

XMLHttpRequest cannot load file:///Users/. . . /assets/svg/drawing.svg.

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Uncaught TypeError: Cannot read property 'hover' of null

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/apple_2/Desktop/html/snap/i-programmer/assets/svg/drawing.svg'.

mightybyte
  • 7,282
  • 3
  • 23
  • 39
ugajin
  • 11
  • 1
  • 3
  • upload image to server and use full URL, not local file. – Nick Jun 30 '15 at 14:24
  • Thanks. This just gets stranger . . . we did that and uploaded the project to a server, and while the svg content now loads in both browsers - in Chrome the animation does not work as anticipated, that is not as it does in Safari. Why this is so strange is this - I have been trying to emulate the CSS :hover transition on certain SVG presentation attributes, which works just fine in Google Chrome, but not in Safari. Now, I seem to have hit on the exact same opposite using Snap(). That aside, perhaps you can explain why it makes a difference hosting the content on a server? – ugajin Jun 30 '15 at 16:15

1 Answers1

0

Found the answer here on stack overflow. See: link

I think the best answer is in Terminal, paste the following : open /Applications/Google\ Chrome.app/ --args --allow-file-access-from-files

Definitely don't like the idea of disabling web security, eek!

Community
  • 1
  • 1
ugajin
  • 11
  • 1
  • 3