title: How do I draw an ellipse with SVG, based around a focal point instead of the center?
body: <p>I'm drawing planetary orbits around a star with SVG, and I need to draw an ellipse that's based around one focal point, rather than the geometric center. I'm drawing it in 2d, but the position needs to take into account the rotation of the ellipse around the focal point, as well as the inclination to the Z axis.</p>
  
  <p>I already have planets that follow the orbital paths, but I can's seem to draw the underlying ellipses so they match up. I have all the orbital data, including all rotational parameters, semi-major, and semi-minor axes. I know I have all the data I need, I just can't seem to figure out how to put it together. Please help!</p>
  
  <p>Here's a diagram of the orbital components: <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Orbit1.svg/400px-Orbit1.svg.png" rel="nofollow">http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Orbit1.svg/400px-Orbit1.svg.png</a></p>
  
  <h2>Example orbit data</h2>
  
  <pre><code>name: Mercury
  semi-major axis (AU): 0.387098
  eccentricity: 0.205630
  longitude of ascending node (deg): 48.331
  inclination (deg): 7.005
  argument of perihelion (deg): 29.124
  </code></pre>
  
  <p>I need the focal point to be at 0,0. By calculating the semi-minor axis ( ry = 0.387098*sqrt(1 - 0.205630^2) ), I can make the ellipse the right shape like this:</p>
  
  <pre><code>&lt;ellipse cx="0" cy="0" rx="0.387098" ry="0.378826" /&gt;
  </code></pre>
  
  <p>I can also center the focal point at 0,0 by calculating the distance between the center and the focal point ( cx = sqrt(0.387098^2 - 0.378826^2) ), so I have this:</p>
  
  <pre><code>&lt;ellipse cx="0.079597" cy="0" rx="0.387098" ry="0.378826" /&gt;
  </code></pre>
  
  <p>I can't figure out how to rotate the ellipse around point 0,0. I can use the longitude of the ascending node to rotate clockwise around the geometrical center, but I also need to rotate the ellipse in the Z direction with the inclination as well, which will affect the rx and ry values. I also think the argument of perihelion may fit in here as well, but I'm not sure where.</p>
  
  <p>I know the values are less than one, but I'll enlarge everything by using a multiplier once I figure out the process.</p>
  
  <hr>
  
  <h3>Update:</h3>
  
  <p>Thanks to BigBadaboom I can now rotate the ellipse around the focal point. I still need to figure out how to rotate it in 3d. As best as I can figure out, these are the steps:</p>
  
  <ol>
  <li>Translate the focal point to 0,0 - <strong>done</strong></li>
  <li>Rotate along the z-axis (2d rotation) by the argument of perihelion (29.124deg) - <strong>done</strong> (thanks BigBadaboom)</li>
  <li><strong>Rotate along the y-axis (3d rotation) by the inclination (7.005deg) - ???</strong></li>
  <li>Rotate along the z-axis again by the longitude of the ascending node (48.331deg) - same process as step 2.</li>
  </ol>
  
  <p>All rotations are centered at 0,0.</p>