Snap() 方法导致 Uncaught TypeError答案

【问题标题】：Snap() method causes Uncaught TypeErrorSnap() 方法导致 Uncaught TypeError
【发布时间】：2015-04-07 19:20:31
【问题描述】：

我正在使用 Snapsvg (http://snapsvg.io/)，并且在 var s = Snap("#svgout");被定义为。我知道这意味着浏览器不知道“Snap”是什么。在我的 script.js 文件中调用它之前，我的 HTML 正在加载 snap.svg.js。我开始认为这可能是一个错误。任何关于调试的建议或关于可能导致它的想法的想法？

下面是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Framework Template</title>
<script src="assets/js/snap.svg-min.js"></script>

<!-- Bootstrap -->
<!--<link href="assets/css/bootstrap.min.css" rel="stylesheet">-->

<link href="assets/css/stylesDevelopment.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
 <body>
 <section class="container">
<section class="row">
    <div class="col-sm-12">
        <h2 class="title">Let's Begin ...</h2>
        <div id="svgout">
        </div>
    </div>
</section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/snap.svg.js"></script>
<script src="assets/js/scripts.js"></script>

<script src="//localhost:35729/livereload.js"></script>

//scripts.js 文件

$(function(){

  var s = Snap("#svgout");

//让我们在位置 100,100 绘制 2 个矩形，然后重新定位它们

  var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.2 });

  var t = s.text(100,50,'Snap("#svg") should reference an svg element, not a div. Or create it by supplying width,height Snap(100,100)');


});

【问题讨论】：

你能发布一些代码（HTML和JS）或链接吗？帮助会容易得多
.js 库经常发生这种情况。乍一看，似乎所有内容都以正确的顺序加载，但请确保在调用它之前包含Snap() 方法所需的所有文件。再一次，它看起来是正确的，但可能有一些不合适的地方。我的第一个想法是在<head> 中没有<script src="assets/js/snap.svg-min.js"></script>，但在您的其他.js 文件中。或者可能是因为您同时包含 min 和 non-min 。
其实这是一个错字。当身体不起作用时，我试着把它放在头上。没有区别。

标签： javascript undefined snap.svg typeerror

【解决方案1】：

线索在文本中:)。如果您查看这一行（我在原始示例中写了它以提供帮助，但我猜它被忽略了:)）...

  var t = s.text(100,50,'Snap("#svg") should reference an svg element, not a div. Or create it by supplying width,height Snap(100,100)');

它说 Snap 需要一个 SVG 元素，而不是一个 div。

所以你应该在这一行将 div 换成 svg。

  <div id="svgout">
    </div>

到

      <svg id="svgout">
    </svg>

【讨论】：

我惊呆了，它就在 javaScript 中。我不敢相信我看得太多了。谢谢。