Question

这可能是一个简单而愚蠢的问题。

我下载了这个库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并重新加载吗？

Answer 1

在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来定位任何元素，但实际上标签是{{1} }}，而不是<svg>或其他任何内容，或<div>构造函数不会初始化，Snap()（或任何绘图方法）将返回错误，表明它不是函数。

所以，总是使用

.circle()

和

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

Answer 2

这里有3个问题......

1）找不到inkscape.svg文件。目前还不清楚它是在本地PC上运行，还是在远程服务器上运行，但你需要对它进行排序，或者将它放在这个html文件旁边，服务器上或本地，但是你要访问它。

2）Snap.load会将文件加载到片段中，但不会将其附加到DOM。您需要做一些事情来附加片段。

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

3）行c = Snap（“＃svg”）需要在Snap.load函数内部（或至少从内部调用）。这是假设#svg在加载的文件中。否则Snap继续加载svg，继续运行，尝试执行Snap（“＃svg”）但文件还没有完成加载。所以逻辑需要改变一下。

例如

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

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

Snap.svg不起作用

2 个答案: