我正在使用 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)');
});
最佳答案
线索在文本中:)。如果您查看这一行(我在原始示例中写了它以提供帮助，但我想它被忽略了 :))...
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 - Snap() 方法导致 Uncaught TypeError，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29499563/