自定义 SVG 签名适用于 CODEPEN，但不适用于本地机器 - 出了什么问题？ [关闭]答案

【问题标题】：Custom SVG signature works on CODEPEN but not on local machine- what is wrong? [closed]自定义 SVG 签名适用于 CODEPEN，但不适用于本地机器 - 出了什么问题？ [关闭]
【发布时间】：2016-07-19 03:22:55
【问题描述】：

我尝试从 codepen http://codepen.io/ghepting/pen/xnezB 复制以下代码以尝试在我的本地主机上运行它。在 codepen 中，您可以看到签名是动画的。但是，在我的本地机器上，它只是将签名完整打印出来，根本没有动画。知道为什么吗？

我的本地主机上有三个文件 index.html（包含 SVG 代码）.js.js、style.css（代码如下）。我也尝试使用 MAMP 来查看它是否可以工作，但仍然只是打印出名称而不进行动画处理。这就是我的签名导入其他两个文件的方式： <head> <link rel="stylesheet" type="text/css" href="style.css"> </head><body><script src="js.js"></script> <div class="container"> <div class="signature"> SVG CODE </div></div></body>

知道可能是什么问题吗？谢谢！

【问题讨论】：

你打开console.log看看有什么问题吗？
codepen 也在使用 Compass 和 SASS...
@Paulie_D 你如何将这些导入我的机器？你认为它的库吗？

标签： javascript html css svg mamp

【解决方案1】：

您缺少 jQuery，它是 javascript 的依赖项。在您的其他 JS 文件上方添加脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

您还应该最后加载 JS，这样您的最终结构将类似于：

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container"> <div class="signature"> SVG CODE </div></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js.js"></script>
</body>

【讨论】：

谢谢 - 但是这仍然不能解决我的电脑上的问题并且仍然是一样的 - 只是没有动画出现:(所以我的 signature.html 文件看起来像这样 {

}
如果你右键单击 > 检查元素然后查看控制台是否有任何错误？
第一个是“GET file://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js net::file not found”，第二个是"而第二个在js文件中" $(document).ready(function () { window.signature.initialize(); return $('button').on('click', function () { window. signature.initialize(); return setTimeout(function () { return window.signature.animate(); }, 500); }); }); $(window).load(function () { return window.signature.animate(); }); }.call(this));" 看不到问题，可以吗？
抱歉，请尝试将“https:”添加到脚本 src。我已经用添加的协议更新了我的答案。
hmm... 这似乎创建了很多“js.js:10 Uncaught TypeError: Cannot read property 'shouldStopExecution' of undefined for (i = 0, len = paths.length; i

【解决方案2】：

好像有两个问题：

1) 缺少 jQuery，它是 javascript <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 的依赖项

2) 在从 codepen 复制 javascript 时，它在编译咖啡脚本时添加了一些附加检查。所以只需使用http://js2.coffee/ 将coffeescript 转换为javascript 预览，然后您可以在代码中使用它。

在修复这两件事之后，代码对我来说非常有效。谢谢@Guy 的帮助

【讨论】：