Question

正如话题标题中所述，我今天早上在this tutorial之后开始使用snap.svg。我想我的每一步都是正确的，但最后我无法在浏览器中显示任何内容。

我做了什么：

1 - 创建＆＃34; snap＆＃34;桌面上的文件夹

2 - 创建＆＃34; js＆＃34; ＆＃34; snap＆＃34;内的文件夹夹

3 - 在＆＃34; snap＆＃34;中创建snap.html文件夹

4 - 在＆＃34; js＆＃34;中创建main.js夹

5 - 下载snap.svg.js并将其添加到＆＃34; js＆＃34;夹

6 - 在我的snap.html中写了这个：

<html>
<head>
  <meta charset="UTF-8">
  <script src="js/snap.svg.js"></script>
  <script src="js/main.js"></script>
</head>
<body>
  <svg id="svg1"></svg>
</body>
</html>

7 - 并在我的main.js中写了这个：

var s = Snap("#svg1");
var r = s.circle(50,50,25);

这应该是最基本的snap.svg，但我甚至无法使它工作，我有点惭愧但我更愿意来找你们指导我们之前把头发弄出来一... 谢谢！

Answer 1

问题是当你的JS运行时，DOM还没有准备好。这是因为您的JS位于HTML的<head>。

有两种解决方案。将<script>元素移到HTML的底部，以便稍后加载。

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <svg id="svg"></svg>
  <script src="js/snap.svg.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

或者你可以确保你的JS在DOM准备好之前不会运行。你可以采用几种方法中的一种来做到这一点。

例如，您可以将代码放入窗口onload事件：

window.onload = function() {

  var s = Snap("#svg1");
  var r = s.circle(50,50,25);

};

或者如果您打算使用jQuery，可以使用其ready()函数等。

snap.svg刚刚开始，无法正常工作

1 个答案: