Snap() 方法导致 Uncaught TypeError

Question

我正在使用 Snapsvg (http://snapsvg.io/) 并且我在 var s = Snap("#svgout"); 的行上得到了一个基本的 "Uncaught TypeError: undefined is not a function"被定义为。我知道这意味着浏览器不知道 "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)');


});

Answer 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>

Snap() 方法导致 Uncaught TypeError

Snap() method causes Uncaught TypeError

javascript

undefined

snap.svg

typeerror