Velocity.js 的 SVG 动画 - $ 未定义

Question

我正在尝试使用 SVG 和 Velocity.js 创建动画徽标。当运行这个项目在 Chrome 它 return 是错误

"$ is not defined"

当以错误的顺序加载脚本时，这个错误似乎很常见，但我似乎无法弄清楚我做错了什么。

运行在 Safari 中根本不会 return 错误，但也没有动画。

HTML 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Inspades logo</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>

    <style>
        body {
            text-align: center;
            margin: 0px;
            padding: 20vh;
            height: 60vh;
        }

        #logo {
            height: 100%;
        }

        object {
            height: 100%;
        }
    </style>

</head>

<body>

    <div id="logo">
        <object type="image/svg+xml" data="inspades_logo.svg"/>
    </div>

    <script type="text/javascript">
        $(function(){
            console.log("ready!");

            function moonOrbit () {
            $("#moon")
                .velocity({ cx: 15, cy: 285, r: 15 }, { duration: 0 })
                .velocity({ cx: 285, cy: 15, r: 10 }, { duration: 1500, delay: 10 });
            };

            moonOrbit();
         });
    </script>

</body>
</html>

SVG 文件

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

    <circle id="moon" cx="15" cy="285" r="15"/>

    <ellipse id="globe" cx="150" cy="150" rx="145" ry="145" fill="rgba(0, 0, 0, 0)" stroke="rgb(0,0,0)" stroke-width="10"/>

</svg>

[编辑] 我尝试删除 jQuery，因为 Velocity.js 不再需要它。但是，这并不能解决未定义变量的错误。奇怪，这是否意味着 Velocity 库中存在错误？ [/编辑]

[编辑] 我按照 Hackerman 的建议编辑了代码，但是在动画方面仍然没有运气。 [/编辑]

希望我没有遗漏一些非常明显的东西，提前致谢！

汤姆

Answer 1

您正在使用 $(document) 和 $("#moon")，因此您必须在项目中包含 jquery；就像你说的，你的代码需要一点重构：

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>logo</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
</head>
<body style="text-align:center; margin:0px; height:60vh; padding:20vh 20vh">
<div id="logo" style="height:100%">
    <object height:100% type="image/svg+xml" data="logo.svg"/>
</div>
<script type="text/javascript">
     $(function(){
        console.log("ready!");
        $("#moon").velocity({ opacity: 1, top: "50%" }).velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });
     });
</script>
</body>
</html>

Svg 文件：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">   
<circle id="moon" cx="15" cy="285" r="15"/>
<ellipse id="globe" cx="150" cy="150" rx="145" ry="145" fill="rgba(0, 0, 0, 0)" stroke="rgb(0,0,0)" stroke-width="10"/>
</svg>

Velocity.js 的 SVG 动画 - $ 未定义

SVG animation with Velocity.js - $ is not defined

jquery

animation

svg

velocity.js

HTML:

Svg 文件：