Snap.svg不起作用

這可能是一個簡單而愚蠢的問題。Snap.svg不起作用

我下載這個庫here，然後我想快速啓動它。

所以，這是test.html在下載包中。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
     <script src="dist/snap.svg.js"></script> 
    </head> 
    <body> 
     <script> 
      var s = Snap(); 
      Snap.load("inkscape.svg", function (f) { 
       console.log(f.select('path[sodipodi:nodetypes="cc"]')); 
      }); 

      var c = Snap("#svg"); 
      // Lets create big circle in the middle: 
      var bigCircle = c.circle(150, 150, 100); 
     </script> 

</body> 
</html>

但瀏覽器似乎空白，控制檯拋出一些錯誤

GET http://127.0.0.1:8080/inkscape.svg 404 (Not Found) 

Uncaught TypeError: Cannot read property 'circle' of null

我錯過了一些文件？

嗯，我是初學者，我應該自己下載inkscape.svg並重新加載它嗎？

來源

2015-10-01 Coda Chang

是'inkscape.svg'在你的根（同'test.html'）目錄下的文件？ –

是的，你應該下載inkscape.svg，把它放在test.html所在的位置，然後重新加載它。 – aug

這裏有3個問題...

1）它不能找到inkscape.svg文件。不清楚它是在你的PC上還是在遠程服務器上運行，但是你需要對它進行排序，或者把它放在這個html文件旁邊，在服務器上或者本地，但是你正在訪問它。

2）Snap.load會將文件加載到一個片段中，但不會將其附加到DOM。你需要做一些事情來追加片段。

例如s.append（f）添加批次。

3）行c = Snap（「＃svg」）需要INSIDE（或至少從內部調用）Snap.load函數。這是假定#svg在加載的文件中。否則，Snap將加載svg，繼續運行，嘗試執行Snap（「＃svg」），但文件尚未完成加載。所以邏輯需要改變一下。

如

Snap.load('inkscake.svg', fragment) { 
    s.append(fragment); 
    doOtherStuffOnceLoadingComplete(); 
} 

function doOtherStuffOnceLoadingComplete() { 
    var c = Snap("#svg"); 
    ... 
}

來源

2015-10-01 08:42:12 Ian

好的，我明白了。謝謝，你一直是一個很好的幫助！ –

在SVG文檔入門指南，它說：

// First lets create our drawing surface out of existing SVG element 
// If you want to create new surface just provide dimensions 
// like s = Snap(800, 600); 
var s = Snap("#svg");

http://snapsvg.io/start/

我沒聽懂，說：「現有的SVG」，只是看了一部分在#svg的代碼，並假設你可以針對ID #svg的任何元素，但實際上標記HAS是<svg>，而不是<div>或其他任何東西，或者Snap()構造函數將不會初始化，並且.circle()（或任何繪製方法）將返回一個錯誤，它不是函數。

所以，總是使用

<svg id="someID"></svg>

和

var s = Snap('#someID');

來源

2016-10-12 18:38:17

Snap.svg不起作用

回答

相關問題