2013-11-20 71 views
0

我使用的是来自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文件加载?

+0

我怀疑这个网页上的答案可能会有所帮助(即使那使用ajax,也许问题是相同的)... http://stackoverflow.com/questions/8449716/cross-origin-requests-are-only -support-for-http-but-it-not-cross-domain – Ian

回答

3

这是发生,因为从长驱直入时加载AJAX调用不允许火外部对象。这是一个安全措施 - 只需在Web服务器中运行该文件,它应该可以正常工作。

+1

我把这个文件放在服务器上,现在显示这个错误:XMLHttpRequest无法加载http://www.server.com/img/process/file.svg 。请求的资源上没有“Access-Control-Allow-Origin”标题。因此不允许原产地'null'访问。 –

0

你应该把HTML文件的Web服务器了。 网页和要加载的文件必须具有相同的url(域名);