我使用的是来自Github上adobe-webplatform Snap.svg/demos/tutorial的示例HTML文件教程。Snap.load()本地SVG无法加载
我改变了位置mascot.svg这样它就会指向本地文件。但是我的SVG文件将不加载,我得到这个错误信息:
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.
这是我的完整的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文件加载?
我怀疑这个网页上的答案可能会有所帮助(即使那使用ajax,也许问题是相同的)... http://stackoverflow.com/questions/8449716/cross-origin-requests-are-only -support-for-http-but-it-not-cross-domain – Ian