问题
I tried to copy the following code from codepen http://codepen.io/ghepting/pen/xnezB to try and run it on my localhost machine. In codepen, as you can see the signature is animated. However, on my local machine it just print the signature out in full and does not animate at all. Any idea why?
I have three files on my local host machine index.html (contains SVG code).js.js, style.css (code below). I tried using MAMP as well to see if it would work however still just prints out the name without animating. This is how my signature imports the other two files:
<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>
Any idea what could be the issue? Thank you!
回答1:
You are missing jQuery which is a dependancy for the javascript. Add the script above your other JS file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
You should also load JS last so your end structure would be something like:
<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>
回答2:
Seems like there were two problems:
1) missing jQuery which is a dependancy for the javascript <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2)While copying javascript from codepen, it was adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code.
After fixinf these two things, the code worked perfectly for me. Thank you @Guy for your help
来源：https://stackoverflow.com/questions/36320425/custom-svg-signature-works-on-codepen-but-not-on-local-machine-what-is-wrong