Question

开始设置外部SVG的动画时遇到了一些麻烦。

SVG是一个包含纯几何（没有动画或样式）的外部文件。 HTML页面包含动画的样式和javascript。 Velocity.js用于动画。当加载页面功能被触发但动画不起作用时，但是当内联替换SVG时，动画效果很好。

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>

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>

    <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="logo.svg"/>
    </div>

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

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

            moonOrbit();
         });
    </script>

</body>
</html>

有人可能会指出我在正确的方向吗？我更愿意在外部使用它。因为将来SVG可能会更大，我想动态加载它们。

外部SVG Velocity.js动画失败（但内联工作正常）

0 个答案: