椭圆路径上的一个圆的svg动画

Question

i am trying to rotate circle on a elliptrical path using svg animation, the code that i am trying is rotating it on a circular path not on the ellipse that i have made , could anyone help me on this plz ?? 我正在尝试使用svg动画在椭圆路径上旋转圆，我正在尝试的代码是在圆形路径上旋转它，而不是在我制作的椭圆上，有人可以帮我解决这个问题吗？

 <!DOCTYPE html>
<html>
    <head>  
        <title>JavaScript SVG Animation</title>
        <style>
        /* CSS here. */
        </style> 
        <script>  
            /* CONSTANTS */
            var initialTheta = 0; // The initial rotation angle, in degrees.
            var thetaDelta = 0.3; // The amount to rotate the square every "delay" milliseconds, in degrees.
            var delay = 10; // The delay between animation stills, in milliseconds. Affects animation smoothness.
            var angularLimit = 360; // The maximum number of degrees to rotate the square.
            var cx = 200; // circle center
            var cy = 150; //circle center

            /* GLOBALS */
            var theCircle; // Will contain a reference to the square element, as well as other things.
            var timer; // Contains the setInterval() object, used to stop the animation.
            var pauseEvent = false;

            function init()
            {
                theCircle = document.getElementById("s1"); // Set this custom property after the page loads.
                theCircle.currentTheta = initialTheta; // The initial rotation angle to use when the animation starts, stored in 
                timer = setInterval(doAnim, delay); // Call the doAnim() function every "delay" milliseconds until "timer" is cleared.     
            }

            function doAnim()
            { 
                if (theCircle.currentTheta > angularLimit)
                {
                    clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
                    return; // No point in continuing; stop now.
                }
                theCircle.setAttribute("transform", "rotate(" + theCircle.currentTheta + "," + cx  + "," + cy +")"); // Rotate the square by a small amount. around given circle point
                theCircle.currentTheta += thetaDelta;  // Increase the angle that the square will be rotated to, by a small amount.
            }

            window.onload = function(){
                var elplay = document.getElementById("play");   
                elplay.addEventListener("click", function(){    
                    if(!pauseEvent){
                        init(); 
                        doAnim();
                    } else{
                        init(); 
                        doAnim();
                        pauseEvent = false;
                    }
                }, false);   

                var elstop = document.getElementById("stop");   
                elstop.addEventListener("click", function(){
                    theCircle.currentTheta = 0 //initialTheta; // The initial rotation angle to use when the animation starts, stored in 
                    theCircle.setAttribute("transform", "rotate(" + theCircle.currentTheta + "," + cx  + "," + cy +")"); // Rotate the square by a small amount. around given circle point
                    clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
                    return; // No point in continuing; stop now.
                }, false);   

                var elpause = document.getElementById("pause");   
                elpause.addEventListener("click", function(){
                    initialTheta = theCircle.currentTheta;
                    pauseEvent = true;
                    clearInterval(timer); // The square has rotated enough, instruct the browser to stop calling the doAnim() function.
                    return; // No point in continuing; stop now.
                }, false);   
            }
        </script>  
    </head>
    <body>
        <button id = "play" style="position: absolute;">Play</button>
        <button id = "pause" style="position: absolute;left: 65px;">Pause</button>
        <button id = "stop" style="position: absolute;left: 135px;">Stop</button>
    <svg width="800px" height="800px" viewBox="0 0 800 800">
            <g transform="translate(200, 150)"> 
        <ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
        <circle id = "s1" cx = "250" cy = "10" r = "20" fill = "yellow" stroke = "black" stroke-width = "3"/>

        </g>
    </svg>
</html>

Answer 1

I believe the reason it is not following your path is because your math is a bit off. 我相信它没有遵循您的目标的原因是因为您的数学有些偏离。 You are drawing an ellipse but your rotation math is circular. 您正在绘制椭圆，但是旋转数学是圆形的。 Either correct your math or better still follow Phrogz advice and learn SMIL. 纠正数学或更好地遵循Phrogz的建议并学习SMIL。

Here is some SVG to get you started: 以下是一些SVG，可帮助您入门：

 <html> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> <path id="orbit" d="M200 400 A200,200 0 1,1 600,400 A200,200 0 1,1 200,400" fill = "salmon" stroke = "black" stroke-width = "3" /> <circle r = "20" fill = "yellow" stroke = "black" stroke-width = "3"> <animateMotion begin="0s" dur="12s" repeatCount="indefinite" > <mpath xlink:href="#orbit"/> </animateMotion> </circle> </svg> </html>

NOTE that you must use a path object and a ellipse has to be constructed from at least two arcs. 注意，必须使用路径对象，并且椭圆必须至少由两个弧线构成。

椭圆路径上的一个圆的svg动画

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-01-31 23:25:31

椭圆路径上的一个圆的svg动画

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-01-31 23:25:31

解决方案1
1 已采纳 2012-01-31 23:25:31