Snap.svg 无效

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

这里有 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");
     ...
}

Answer 2

在 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/

我没听懂 "Existing SVG" 的部分，只是查看了 #svg 代码并假设您可以定位 ID 为 #svg 的任何元素，但实际上标签必须是<svg>，而不是 <div> 或其他任何东西，或者 Snap() 构造函数将不会初始化并且 .circle()（或任何绘制方法）将返回一个错误，它不是一个函数.

所以，总是使用

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

和

var s = Snap('#someID');

Snap.svg 无效

Snap.svg doesn't work

javascript

html

svg

snap.svg