Question

我跟着几乎所有基本的snap.svg教程一直在墙上撞墙。通过jsfiddle或codepen运行代码时，一切正常，但是当我通过我自己的本地编辑器尝试相同的操作时，我运气不佳。

我的代码：

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/snap.svg.js"></script>
  </head>
  <body>
    <svg id="svg" class="svg"></svg>
  </body>
</html>

的JavaScript

var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
    fill: "#addedd",
    strokeWidth: 10,
    stroke: "#beeeef"
});

CSS

body {
  display: block;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.svg {
  width: 100%;
  height: 100%;
}

我总是提出的主要问题是该行的参考错误：

var surface = Snap("#svg");

我通过在函数中包含一个回调并包装块来解决这个问题：

function main(){
var surface = Snap("#svg");
var circ = surface.circle(100, 100, 50);
circ.attr({
    fill: "#addedd",
    strokeWidth: 10,
    stroke: "#beeeef"
 });
};
$(document).ready(main);

我觉得这些教程正在跳过某些东西？我确定有比我想出的更好的分辨率吗？你觉得怎么样？

我只是想开始学习Snap！

Answer 1

Snap不依赖于jquery。

问题可能是您正在运行脚本并调用此行。

<div position="relative" img=bigimg>
    <button position="absolute" id=leftbtn onclick="showNext(-1);"></button>
        <img class="gpic" src='../images/0.jpg'>
        <img class="gpic" src ='../images/1.jpg'>
        <img class="gpic" src ='../images/2.jpg'>
        <img class="gpic" src = '../images/3.jpg'>
        <img class="gpic" src ='../images/4.jpg'>
        <img class="gpic" src ='../images/5.jpg'>
        <img class="gpic" src ='../images/6.jpg'>
        <img class="gpic" src ='../images/7.jpg'>
        <img class="gpic" src ='../images/8.jpg'>
<button position="absolute" id=rightbtn onclick="showNext(1);"></button>

在svg标记之前

var surface = Snap("#svg");

加载到DOM中。所以它无法找到要引用的元素。该问题与Snap完全无关，只是普通的HTML / SVG和JS加载和订购。

从原始代码中可以清楚地看到，当您加载自己的js代码时。您可以尝试将其放在svg标记之后，但通常首选它以确保文档是先准备好......

<svg id="svg" class="svg"></svg>

正如您已经找到的那样：）。

Answer 2

正如您所提到的，Snap代码只能执行一次，加载jQuery。

$(document).ready(function(){
    var surface = Snap("#svg");
    var circ = surface.circle(100, 100, 50);
    circ.attr({
        fill: "#addedd",
        strokeWidth: 10,
        stroke: "#beeeef"
    });
});

加载js文件的顺序很重要。 ~~由于snap依赖于jQuery，因此在jQuery准备就绪之前无法执行它~~。

除了Snap或任何javaScript库之外，首先要了解JS的基本知识非常重要。较小的文件将比大文件加载得更快，即使之后也会请求它们。

在你的情况下，甚至在jQuery下载之前，你的js的主要功能被执行了，你得到了一个错误。这就是为什么$（document）.ready始终是使用jQuery启动代码的首选方式。

修改：

正如@Ian指出的那样，snap并不依赖于jQuery。实际问题是js文件的错误排序。正确的顺序应如下，

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/snap.svg.js"></script> </head> <body> <svg id="svg" class="svg"></svg>  <script type="text/javascript" src="js/main.js"></script> </body> </html>

通过回叫解决参考错误

2 个答案: