Как преобразовать путь VML в путь SVG?

«qx» в VML - это «эллиптический квадрант», «Q» в SVG - это квадратичный безье. Совершенно разные вещи.

Самым простым решением преобразования qx является аппроксимация его кубической кривой Безье. Использование дуги было бы наиболее точным, но для определения правильного значения для «флага развертки» потребуется сложная математика. Хотя кубическая кривая Безье не является идеальным приближением к квадранту, она очень близка, и ошибка не будет достаточно заметной, чтобы повлиять на ваши рисунки.

Секрет рисования круговых / эллиптических квадрантов - это постоянная 0,5522847498. Он определяет длину линий контрольных точек для имитации эллиптической кривой. Вы можете найти объяснения того, как это число получено, погуглив это число.

Итак, VML определяет «qx» как эллиптический квадрант, начинающийся в направлении X. Таким образом, для команды пути "qx21600,10800" алгоритм преобразования будет следующим:

arcFactor = 0.5522847498;
currentX = 10800;
currentY = 0;      // start coords (from the move)

x = 21600;
y = 10800;  // first coords in "qx"

dx = x - currentX;
dy = y - currentY;

// Calculate first control point
cp1x = currentX + dx * arcFactor;
cp1y = currentY;   // starts out horizontal

// Calculate second control point
cp2x = x;
cp2y = y - dy * arcFactor;

svgBezier = "C" + cp1x + "," + cp1y + "," + cp2x + "," + cp2y + "," + x + "," + y;

Теперь ваша кривая имеет второй набор координат для qx. В спецификации сказано, что это означает повторение команды «qx». Однако для второго набора нет смысла вести себя точно так же, как qx (т. Е. Начинать горизонтально). Так что я думаю, что они должны вести себя как «цы» (начать вертикально). Т.е. qx и qy чередуются. Предполагая, что это так, расчет qy должен быть:

// Calculate first control point
cp1x = currentX;   // starts out vertical
cp1y = currentY + dy * arcFactor;

// Calculate second control point
cp2x = x - dx * arcFactor;
cp2y = y;

Демо-скрипт здесь