Snap.load() local SVG fails to Load

Question

I am using the example HTML file called tutorial from the adobe-webplatform Snap.svg / demos / tutorial on Github.

I changed the location of mascot.svg so that it will point to the local file. However my SVG file will not load and I get this error message:

XMLHttpRequest cannot load file:///C:/Users/cr2320.MC/Documents/Snap.svg-0.1.0/demos/tutorial/mascot.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

This is my full HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Tutorial test</title>
<style>
body {
    background: #000;
}
</style>

<script src="C:/Users/cr2320.MC/Documents/Snap.svg-0.1.0/dist/snap.svg-min.js">   
</script> 
</head>
<body>
<svg width="0" height="0">
    <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" 
height="10" viewBox="0 0 10 10">
        <path d="M-5,0,10,15M0-5,15,10" stroke="white" stroke-width="5"/>
    </pattern>
</svg>
<script>
    var s = Snap();
    var bigCircle = s.circle(100, 100, 50);
    bigCircle.attr({
        fill: "#bada55",
        stroke: "#000",
        strokeWidth: 5
    });
    var smallCircle = s.circle(70, 100, 40);
    var discs = s.group(smallCircle, s.circle(130, 100, 40));
    discs.attr({
        fill: Snap("#pattern")
    });
    bigCircle.attr({
        mask: discs
    });
    Snap.load(
    "C:/Users/cr2320.MC/Documents/Snap.svg- 0.1.0/demos/tutorial/mascot.svg",
    function (f) {
        var g = f.select("g");
        f.selectAll("polygon[fill='#09B39C']").attr({
            fill: "#fc0"
        })
        s.append(g);
        g.drag();
    });
    </script>
    </body>
    </html>

How do I get the local SVG file to load?

I suspect the answer on this page may help (even though thats using ajax, maybe the issue is the same)... http://stackoverflow.com/questions/8449716/cross-origin-requests-are-only-supported-for-http-but-its-not-cross-domain — Ian, Nov 20 '13 at 23:25

score 3 · Answer 1 · answered Nov 25 '13 at 00:13

3

This is happening because AJAX calls are not allowed fire for external objects when loading straight from the drive. This is a security precaution - just run the file inside a web server and it should work just fine.

answered Nov 25 '13 at 00:13

Fedoranimus

816
6
20

1

I put the file in a server and now display this error: XMLHttpRequest cannot load http://www.server.com/img/process/file.svg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – Jose Rojas Jul 28 '15 at 04:51

score 0 · Answer 2 · answered Dec 22 '15 at 08:16

0

you should put the html files to web server too. web page and the files to load must have the same url(domain name);

answered Dec 22 '15 at 08:16

Yongnam Jeong

319
3
2

Snap.load() local SVG fails to Load

2 Answers2