带有 Velocity.js 的 SVG 动画 - 未定义 $答案

【问题标题】：SVG animation with Velocity.js - $ is not defined带有 Velocity.js 的 SVG 动画 - 未定义 $
【发布时间】：2015-10-09 11:55:24
【问题描述】：

我正在尝试使用 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 的建议编辑了代码，但动画仍然没有运气。 [/编辑]

希望我在这里没有遗漏一些非常明显的东西，在此先感谢！

汤姆

【问题讨论】：

标签： jquery animation svg velocity.js

【解决方案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>

【讨论】：

哦，我以为我可以在没有 jQuery 的情况下使用 Velocity.js，但你是对的“$ 未定义”-错误现在已修复。但是动画仍然不起作用，显然功能确实起作用（出现了console.log），但没有动画。
@TomHemmes 动画是一个单独的问题 :)
@ajmajmajma 好吧，因为它们不相关，我会在速度文档中做更多研究，也许会提出一个新问题。谢谢