Databases
StackOverflow2013
Postsdbo
POsvg animation of a circle on an elliptical path
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POsvg animation of a circle on an elliptical path
    primarykey
    data
    text
    <p>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 ??</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;JavaScript SVG Animation&lt;/title&gt; &lt;style&gt; /* CSS here. */ &lt;/style&gt; &lt;script&gt; /* 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 &gt; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;button id = "play" style="position: absolute;"&gt;Play&lt;/button&gt; &lt;button id = "pause" style="position: absolute;left: 65px;"&gt;Pause&lt;/button&gt; &lt;button id = "stop" style="position: absolute;left: 135px;"&gt;Stop&lt;/button&gt; &lt;svg width="800px" height="800px" viewBox="0 0 800 800"&gt; &lt;g transform="translate(200, 150)"&gt; &lt;ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/&gt; &lt;circle id = "s1" cx = "250" cy = "10" r = "20" fill = "yellow" stroke = "black" stroke-width = "3"/&gt; &lt;/g&gt; &lt;/svg&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USRuby
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POsvg animation of a circle on an elliptical path
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs it not acceptable to just use built-in SMIL [animation along a path](http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement)?
      singulars
      1. POsvg animation of a circle on an elliptical path
      1. USPhrogz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload