CODEWITHSUNDEEP
htmlsvggeometry
Himmators
Himmators

Reputation: 15006

How do I draw an ellipse based on focal-point coordinates using svg path?

I have the coordinates of the focal points of an ellipse. The distance from one focal-point to the border of the elipse to the second focal-point equals 130% of the total distance between the axis. http://www.w3schools.com/svg/svg_path.asp How do I draw an ellipse based on those coordinates using svg? Or any non horizontal elipse for that matter. Unfortenately, I can't use the svg Ellipse in this case.

the following two eliptical arcs form an ellipse, but I have no idea how I should manipulate them based on the focal points. 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <path d="M 125,75 a180,50 100 1,1 100,50" />
     <path d="M 125,75 a180,50 100 0,0 100,50" />
</svg>

Upvotes: 4

Views: 3124

Answers (1)

MvG
MvG

Reputation: 60868

The two focal points by themselves do not define an ellipse, you'll need one more real parameter. This can be seen from the fact that one can draw an ellipse by wrapping a string of fixed length around the focal points and keeping it taunt with the drawing pen. It's that string length you're missing. So you'll need e.g. one point on the ellipse, or something similar.

Given one more parameter and the distance between the foci, you can compute all other parameters like the lengths of the semimajor and semiminor axis, as you require them for your path specification. So for example, if you have one point which should lie on the ellipse, then you could compute the distance to the two foci, add those lengths, and know that sum to be equal to 2a, where a is the length of the semimajor axis. Then you get the length of the semiminor axis as b = sqrt(a2 - f 2), where 2f is the distance between your foci.

Now that you have included the 130% part in your question, I can give you a computation for that as well.
You have a = 1.3 f. From that you get b = sqrt(1.32 - 1)f ≈ 0.83 f. Notice that f still refers to half the distance between the focal points. You'll also need to compute two points on the ellipse. It's easiest to choose these on the major axis. So if F and G are your focal points, then you have P = (f − a)/(2f) × F + (f + a)/(2f) × G as one point on the ellipse, and Q = (f + a)/(2f) × F + (f - a)/(2f) × G as the other.

Once you have the lengths of the semimajor and semiminor axis, you can use these as the radii arguments to the arc command of an svg path, which are the first two parameters, 180,50 in your example. You can compute the rotation from the slope of the line connecting the foci, using atan2 or similar, and use that as the third parameter instead of 100. Set the large-arc flag any way you like (e.g. 0), and the sweep flag arbitrarily but equal for the two halfs of the ellipse (e.g. 0). All these terms refer to the description in the SVG 1.1 specification. Move to P, do an arc with the parameters I just described to point Q, and another arc back to P.

The result should be a complete ellipse matching your parameters. The combination of two arcs was written in a later edit.

Upvotes: 5

Related Questions