Question

我正在使用Github上的adobe-webplatform Snap.svg / demos / tutorial中名为 tutorial 的示例HTML文件。

我更改了 mascot.svg 的位置，以便它指向本地文件。但是我的SVG文件无法加载，我收到此错误消息：

XMLHttpRequest无法加载file：/// C：/Users/cr2320.MC/Documents/Snap.svg-0.1.0/demos/tutorial/mascot.svg。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许原点'null'访问。

这是我的完整HTML代码：

<!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>

如何加载本地SVG文件？

Answer 1

发生这种情况是因为直接从驱动器加载时不允许对外部对象进行AJAX调用。这是一个安全预防措施 - 只需在Web服务器中运行该文件，它应该可以正常工作。

Answer 2

你应该把html文件也放到web服务器上。网页和要加载的文件必须具有相同的网址（域名）;

Snap.load（）本地SVG无法加载

2 个答案: