Question

我正在尝试使用SVG和Velocity.js创建动画徽标。在Chrome中运行此项目时，它会返回错误

"$ is not defined"

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

在Safari中运行根本不会返回错误，但也不会返回任何动画。

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动画 - $未定义

1 个答案:

HTML：

Svg文件：