How do I draw an ellipse with SVG, based around a focal point instead of the center?

Question

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.

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!

Here's a diagram of the orbital components: http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Orbit1.svg/400px-Orbit1.svg.png

Example orbit data

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

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:

<ellipse cx="0" cy="0" rx="0.387098" ry="0.378826" />

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:

<ellipse cx="0.079597" cy="0" rx="0.387098" ry="0.378826" />

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.

I know the values are less than one, but I'll enlarge everything by using a multiplier once I figure out the process.

---

Update:

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:

1. Translate the focal point to 0,0 - done
2. Rotate along the z-axis (2d rotation) by the argument of perihelion (29.124deg) - done (thanks BigBadaboom)
3. Rotate along the y-axis (3d rotation) by the inclination (7.005deg) - ???
4. Rotate along the z-axis again by the longitude of the ascending node (48.331deg) - same process as step 2.

All rotations are centered at 0,0.

Answer 1

This also comes very late, but I just saw your post… and just solved the problem by myself after working months on it…

There is no straight formula for doing this. You need to rotate the ellipse along three axes in 3D, which is done by using rotation matrices. The short way to do this with SVG is… you can’t!

If you some some planetarium software, though, you’ll see that some do draw orbital ellipses for some objects such as planetary satellites. I asked the conceptor of one such planetarium software how it’s done, and he told me that they just calculate a lot of points around the orbit, rotate each point in 3D (with matrices), and “connect the dots.” This procedure can be processor-intensive and take a “long” time (computer-wise, even a second is “long”!), so I was hoping for a different approach, as I had done that myself in the past.

Then, I realized that to draw an ellipse, one only needs five points along the ellipse, so such a bunch-of-connected-dots procedure is not needed. My approach is to 3D-matrix-rotate only five points along the ellipse. These are easy to determine:

• Ascending node
• Periastron
• Descending node
• Apoastron
• One random point, preferably not too close to any of the four above, along the orbit, e.g. where the selected body is at the time of observation

Then a simple procedure (e.g. the one explained at pages 55–59 of http://astrowww.phys.uvic.ca/~tatum/celmechs/celm2.pdf) can be followed for drawing the rest of the ellipse from these points.

I don’t have a “live” link to show the result, but I’m working on it! ;-)

Answer 2

This probably comes a bit too late, but I was struggling with the same issues myself and ran into this question trying to find some solutions.

I don't think SVGs support 3D rotations, but you could use CSS3 transform instead.

Here is an SVG example I made with the CSS transformations.

For cleaner SVG without CSS browser prefixes (-webkit, -moz etc.) see here. In this version at least Chrome will fail to render the 3D transformations and the orbits in the SVG probably look a bit like in your version before step 3.

You can use url parameters for other variations of the SVG file:

• size: number –> Size of the SVG in pixels
• bbox: number –> Size of the bounding box in AU (1-200)
• noPrefixes –> Don't inlude CSS browser prefixes

For example: solar.svg?size=800&bbox=160&noPrefixes

For me the next steps will be calculating the orbits and actual planet locations based on TLE data. In the current version the planets are in random locations on their orbits and of course the orbits are not that accurate either.

Answer 3

I'm not sure I quite understand all of what you are trying to do. But you can perform the rotation about 0,0 like this:

<ellipse cx="0.079597" cy="0" rx="0.387098" ry="0.378826" transform="rotate(<angle> 0 0)"/>