2013-11-20 72 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(域名);