在为基于其自身VML格式的Internet Explorer实现SVG时，我遇到了将SVG椭圆弧转换为VML椭圆弧的问题。
在VML中，通过两个点的两个角度和半径长度定义一条弧线， 在SVG中，通过椭圆边界框上两个点的两个坐标对定义一条弧线。
因此，问题是：如何将椭圆的两个点的角度表达为它们的坐标对。 一个中间问题可能是：如何通过椭圆曲线上一对点的坐标找到椭圆的中心。
更新: 假设一个椭圆通常放置（它的半径平行于线性坐标系统轴），因此不会应用旋转。
更新: 这个问题与svg:ellipse元素无关，而与svg:path元素中的“a”椭圆弧命令有关(SVG Paths: The elliptical arc curve commands)
// Calculate the centre of the ellipse
// Based on http://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
var x1 = 150; // Starting x-point of the arc
var y1 = 150; // Starting y-point of the arc
var x2 = 400; // End x-point of the arc
var y2 = 300; // End y-point of the arc
var fA = 1; // Large arc flag
var fS = 1; // Sweep flag
var rx = 100; // Horizontal radius of ellipse
var ry = 50; // Vertical radius of ellipse
var phi = 0; // Angle between co-ord system and ellipse x-axes
var Cx, Cy;
// Step 1: Compute (x1′, y1′)
var M = $M([
[ Math.cos(phi), Math.sin(phi)],
[-Math.sin(phi), Math.cos(phi)]
]);
var V = $V( [ (x1-x2)/2, (y1-y2)/2 ] );
var P = M.multiply(V);
var x1p = P.e(1); // x1 prime
var y1p = P.e(2); // y1 prime
// Ensure radii are large enough
// Based on http://www.w3.org/TR/SVG/implnote.html#ArcOutOfRangeParameters
// Step (a): Ensure radii are non-zero
// Step (b): Ensure radii are positive
rx = Math.abs(rx);
ry = Math.abs(ry);
// Step (c): Ensure radii are large enough
var lambda = ( (x1p * x1p) / (rx * rx) ) + ( (y1p * y1p) / (ry * ry) );
if(lambda > 1)
{
rx = Math.sqrt(lambda) * rx;
ry = Math.sqrt(lambda) * ry;
}
// Step 2: Compute (cx′, cy′)
var sign = (fA == fS)? -1 : 1;
// Bit of a hack, as presumably rounding errors were making his negative inside the square root!
if((( (rx*rx*ry*ry) - (rx*rx*y1p*y1p) - (ry*ry*x1p*x1p) ) / ( (rx*rx*y1p*y1p) + (ry*ry*x1p*x1p) )) < 1e-7)
var co = 0;
else
var co = sign * Math.sqrt( ( (rx*rx*ry*ry) - (rx*rx*y1p*y1p) - (ry*ry*x1p*x1p) ) / ( (rx*rx*y1p*y1p) + (ry*ry*x1p*x1p) ) );
var V = $V( [rx*y1p/ry, -ry*x1p/rx] );
var Cp = V.multiply(co);
// Step 3: Compute (cx, cy) from (cx′, cy′)
var M = $M([
[ Math.cos(phi), -Math.sin(phi)],
[ Math.sin(phi), Math.cos(phi)]
]);
var V = $V( [ (x1+x2)/2, (y1+y2)/2 ] );
var C = M.multiply(Cp).add(V);
Cx = C.e(1);
Cy = C.e(2);
椭圆不能仅由两个点定义。即使是圆（一种特殊的椭圆），也需要三个点来定义。
即使有三个点，也会有无限个通过这三个点的椭圆（想象一下旋转）。
请注意，边界框建议椭圆的中心，并且很可能假定其长轴和短轴与x,y（或y,x）轴平行。
中间问题相当简单...你不需要。你可以从边界框中计算出椭圆的中心（也就是说，只要椭圆在框中心，框的中心就是椭圆的中心）。
对于你的第一个问题，我建议查看椭圆方程的极坐标形式，该形式可在Wikipedia上找到。您还需要计算椭圆的离心率。
或者您可以通过暴力法从边界框中获取值...计算点是否位于椭圆上并匹配角度，并遍历边界框中的每个点。
基于Rikki的回答，使用TypeScript实现。
计算过程中使用默认的DOMMatrix和DOMPoint（在最新版本Chrome v.80中测试）而非外部库。
ellipseCenter(
x1: number,
y1: number,
rx: number,
ry: number,
rotateDeg: number,
fa: number,
fs: number,
x2: number,
y2: number
): DOMPoint {
const phi = ((rotateDeg % 360) * Math.PI) / 180;
const m = new DOMMatrix([
Math.cos(phi),
-Math.sin(phi),
Math.sin(phi),
Math.cos(phi),
0,
0,
]);
let v = new DOMPoint((x1 - x2) / 2, (y1 - y2) / 2).matrixTransform(m);
const x1p = v.x;
const y1p = v.y;
rx = Math.abs(rx);
ry = Math.abs(ry);
const lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry);
if (lambda > 1) {
rx = Math.sqrt(lambda) * rx;
ry = Math.sqrt(lambda) * ry;
}
const sign = fa === fs ? -1 : 1;
const div =
(rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p) /
(rx * rx * y1p * y1p + ry * ry * x1p * x1p);
const co = sign * Math.sqrt(Math.abs(div));
// inverse matrix b and c
m.b *= -1;
m.c *= -1;
v = new DOMPoint(
((rx * y1p) / ry) * co,
((-ry * x1p) / rx) * co
).matrixTransform(m);
v.x += (x1 + x2) / 2;
v.y += (y1 + y2) / 2;
return v;
}使用代码回答问题的一部分
如何通过椭圆曲线上一对点的坐标找到椭圆的中心。
这是一个TypeScript函数，它基于Sergey Illinsky的优秀答案（在我的看法中有些不完整）。它计算具有给定半径的椭圆的中心，条件是提供的两个点a和b必须位于椭圆的周长上。由于此问题通常有两个解决方案，因此代码选择将椭圆放置在这两个点“上方”的解决方案：
（请注意，椭圆的长轴和短轴必须平行于水平/垂直）
/**
* We're in 2D, so that's what our vertors look like
*/
export type Point = [number, number];
/**
* Calculates the vector that connects the two points
*/
function deltaXY (from: Point, to: Point): Point {
return [to[0]-from[0], to[1]-from[1]];
}
/**
* Calculates the sum of an arbitrary amount of vertors
*/
function vecAdd (...vectors: Point[]): Point {
return vectors.reduce((acc, curr) => [acc[0]+curr[0], acc[1]+curr[1]], [0, 0]);
}
/**
* Given two points a and b, as well as ellipsis radii rX and rY, this
* function calculates the center-point of the ellipse, so that it
* is "above" the two points and has them on the circumference
*/
function topLeftOfPointsCenter (a: Point, b: Point, rX: number, rY: number): Point {
const delta = deltaXY(a, b);
// Sergey's work leads up to a simple system of liner equations.
// Here, we calculate its general solution for the first of the two angles (t1)
const A = Math.asin(Math.sqrt((delta[0]/(2*rX))**2+(delta[1]/(2*rY))**2));
const B = Math.atan(-delta[0]/delta[1] * rY/rX);
const alpha = A + B;
// This may be the new center, but we don't know to which of the two
// solutions it belongs, yet
let newCenter = vecAdd(a, [
rX * Math.cos(alpha),
rY * Math.sin(alpha)
]);
// Figure out if it is the correct solution, and adjusting if not
const mean = vecAdd(a, [delta[0] * 0.5, delta[1] * 0.5]);
const factor = mean[1] > newCenter[1] ? 1 : -1;
const offMean = deltaXY(mean, newCenter);
newCenter = vecAdd(mean, [offMean[0] * factor, offMean[1] * factor]);
return newCenter;
}
此函数不会检查解决方案是否可行，也就是说，提供的半径是否足够连接这两个点！
r2放入sqrt中会使其符号消失，从而导致某些情况下得到错误的结果！ - Taco de Wolffr2应该是(y1 - y2) / (2 * b)（而不是(y2 - y1) / (2 * b)），并且a1的结果为arctan(-r1/r2)（而不是arctan(r1/r2)）。在我的实现中，原始方程导致椭圆位于 x1、y1 的相反侧，而通过我的更改，椭圆现在处于正确的位置。 - Timwi