如何将VML路径转换为SVG路径？

Question

我目前正在开发一款应用，我需要将VML形状转换为SVG形状。虽然我可以处理它的所有其他方面，但我正面临着将形状的path从VML路径正确转换为SVG路径的问题。我正在为我的代码使用XSLT和Javascript的组合。

我对角度形状的转换有足够的控制（即只包含直线的形状），但是我很难用曲线转换路径。

例如，对于一个简单的形状：

VML路径为：m10800,qx21600,10800,10800,21600l,21600,,xe

现在，如果我将m替换为M，将l替换为L，将qx替换为Q，并执行必要的缩放比例我得到以下SVG形状：

SVG路径将Q/qx中的第一组坐标视为控制点，因此实际路径不会通过该点，而VML则将这些坐标视为路径应通过的点。我不明白如何用SVG实现这一目标（即确保路径通过特定的一个或多个点）。

目前我正在使用this和this分别研究SVG和VML。我也尝试使用Vector Converter 1.2，但这也不起作用。

有人可以建议我一个方法，一个图书馆，任何学习链接或教程，我可以找到解决问题的方法吗？

提前致谢!!

Answer 1

VML中的“qx”是“椭圆象限”，SVG中的“Q”是二次贝塞尔曲线。完全不同的东西。

转换“qx”的最简单方法是用三次贝塞尔曲线逼近它。使用弧线将是最准确的，但是为了确定“扫描标志”的正确值，将涉及一些棘手的数学。虽然三次贝塞尔曲线不是象限的完美近似值，但它非常接近，并且误差不足以影响您的绘图。

绘制圆形/椭圆形象限的秘诀是常数0.5522847498。它定义了控制点线必须多长时间来模拟椭圆曲线。您可以通过Google搜索该号码找到有关如何派生的解释。

因此，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完全相同（即从水平开始）是没有意义的。所以我认为它们实际上必须表现为“qy”（从垂直开始）。 IE浏览器。 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;

Demo fiddle is here