gpt4 book ai didi

javascript - Snap.svg 不起作用

转载 作者:行者123 更新时间:2023-12-03 08:46:11 24 4
gpt4 key购买 nike

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

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

最佳答案

在 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 的元素,但实际上标签必须是 <svg> ,不是<div>或其他任何东西,或 Snap()构造函数不会初始化并且 .circle() (或任何绘制方法)将返回一个错误,表明它不是一个函数。

所以,总是使用

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

var s = Snap('#someID');

关于javascript - Snap.svg 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32878924/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com