1

I am having a little trouble getting started on animating my external SVG.

SVG is an external file containing pure geometry (no animation or styling). HTML page contains both styling and javascript for animation. Velocity.js is used for animation. When loading the page function is triggered but animation does not work, however when replacing the SVG inline the animation works perfectly.

SVG file

<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>

The HTML file

<!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>

Could someone maybe point me in the right direction here? I would prefer to have it externally. Because in the future SVG's may be larger and I want to load them dynamically.

Tom Hemmes
  • 2,000
  • 2
  • 17
  • 23
  • 1
    Take a look at http://stackoverflow.com/questions/8798745/how-to-get-html-elements-from-an-object-tag as you will have to access the object differently as its not inline. – Ian Jul 21 '15 at 09:44
  • 1
    http://stackoverflow.com/questions/3346106/accessing-a-dom-object-defined-in-an-external-svg-file – philipp Jul 21 '15 at 09:45
  • Don't know how I could have missed those when searching, thanks guys! – Tom Hemmes Jul 21 '15 at 11:18

0 Answers0