0

我正在使用来自 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”标头。因此，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 文件加载？

4

2 回答 2

3

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

于 2013-11-25T00:13:13.790 回答
0

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

于 2015-12-22T08:16:36.850 回答