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 ??
<!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>
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.
Here is some SVG to get you started:
NOTE that you must use a path object and a ellipse has to be constructed from at least two arcs.