Question

我正在使用Snapsvg（http://snapsvg.io/）并且我在var s = Snap（“＃svgout”）的行上得到了一个基本的“Uncaught TypeError：undefined is not 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 file

$(function(){

  var s = Snap("#svgout");

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

  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。

所以你应该在这一行交换svg的div。

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

到

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

Snap（）方法导致Uncaught TypeError

1 个答案: