编辑：编辑问题以缩小范围，但我觉得保留原始信息很有帮助。仔细阅读结论部分进行修改。
原始问题
大家好！我想学习SVG变形背后的逻辑。作为一个快速的先驱，我知道Stack Overflow上已经有类似的问题，但据我所知，这不是重复。如果你进一步阅读，你会明白我的意思。
为什么？
我想将一个SVG转换为另一个SVG，但我需要一个跨浏览器的解决方案。我找到了像GreenSock这样的解决方案，但我买不起他们的许可证。
什么吗
本着一个不断发展的开发人员的精神，我决定扩大我的视野，并找出如何制作个性化，可重复使用的跨浏览器SVG变形解决方案。虽然，在开始之前，我想了解我的目标。
详情（我的主要问题）
我希望能够对SVG变形背后的逻辑有所了解。 I.E.如何将顶点匹配在一起并进行补间，如何将顶点从锐角无缝转换为贝塞尔曲线，这些转换背后的数学是什么，如何变换不同顶点数的SVG（如果碰巧有你有什么想法，如何防止顶点与目标形状中的多个记者匹配？
我对逻辑，计算机科学，数学更感兴趣。如果您愿意根据我需要使用的内置Javascript函数指出正确的方向，那么我会非常感激，但这不是必需的。一旦我了解了我需要采取的逻辑方向，我就可以轻松查找该文档。
例如，为了让事情在回答中保持一致，如果我想将圆圈变成正方形怎么办？ （显然有更简单的方法可以做到这一点，但使用它只会使可视化变得更简单）
免责声明
（1）我非常精通Javascript，它的语法和复杂性。我从来没有处理过Javascript中的向量，我不确定顶点是如何被定位和操纵的。
（2）我 NOT 要求提供有关如何完成此任务的完整，深入的教程，我知道这不是我们任何人在这里的目的。相反，我会欣赏一个主干，一个正确方向的推动，以及对这个过程的细微差别的一些洞察。
TL; DR
您可以为从一个SVG变形到另一个SVG（简单或复杂）背后的逻辑，科学或数学有什么见解。
结论
感谢大家提供的任何见解！这绝不是必要的，所以请随时抽出时间做出回应。
修改
由于过于宽泛，这个问题被搁置了。在重新审视我写的内容之后，我完全明白了。因此，更具体地说，这是我想要帮助的内容。
让我说我有插画家的矢量A：
<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . . >
<polygon style="fill:#FFFFFF;" points="72,72 36,72 0,72 0,36 0,0 36,0 72,0 72,36 "/>
</svg>
矢量B：
<svg id="Layer_1" x="0px" y="0px" width="72px" height="72px" viewBox="0 0 72 72" . . .>
<path style="fill:#FFFFFF;" d="M72,36c0,9.941-4.029,18.941-10.544,25.456S45.941,72,36,72c-9.938,0-18.937-4.027-25.451-10.539
C4.031,54.945,0,45.943,0,36c0-9.941,4.029-18.941,10.544-25.456C17.059,4.029,26.059,0,36,0c9.94,0,18.939,4.029,25.455,10.543
C67.971,17.058,72,26.059,72,36z"/>
</svg>
矢量A是一个完美的正方形，有8个均匀间隔的顶点，矢量B是一个完美的圆形，有8个均匀间隔的顶点。
如果我想将Vector A变形为Vector B，我该如何在Javascript中进行操作？我知道我必须使用循环并主动将点移动到指定的目的地，但是，首先，什么是定位和移动各个顶点的最佳方法？ 其次，确定顶点应移动到哪个位置的最佳方法是什么，以及如何主动跟踪它。对于这样的顶点完美间隔的东西，多个点与单个目标等距离，我将如何逻辑地匹配正确的顶点以获得最美观的结果？ 第三，在这个例子中我将一个多边形元素转换为一个路径元素，这很重要吗？如果是这样，我怎么能绕过那个障碍呢？
同样，我对逻辑最感兴趣，但特定的代码总是受到赞赏。而且重申一下，我不是在寻找SVG变形的解决方案，这些解决方案很丰富，我希望能够理解这个过程，以便我可以重新创建它，以扩展我的开发知识。
非常感谢！所有的意见都表示赞赏。
答案 0 :(得分：2)
我创建了一个简单的库来合并javascript中的两个图像，但它不适用于SVG ...但也许我仍然可以提供一些建议：
一旦你有匹配点，它应该很容易： - 让图1中的呼叫点为O1 .. Ox（O为原点;） - 让图2中的呼叫点D1 ... Dx（D作为目的地） - 让我们在开始变形T1时调用时间 - 并且当我们停止T2时调用时间（因此T2-T1是动画的长度）
基于T2和T1，您可以计算出需要显示的帧数。 然后你可以计算每一帧的位置。基本上，T1处的帧应为图1 ... T2处的帧应为图2 ...允许呼叫帧数NF。
在帧之间你需要计算你的点的新位置，让我们称它们为F1_1 ...... F1_x（第一帧从1到x）。让我们调用一个特定的帧Fx（特定帧中的点是Fx_x）
然后我们可以计算每个帧的点位置：F1_x = Fx *（从Tx到Px的距离）/ NF
解释....我们从第一个图像和第二个点开始计算一个点并计算它们之间的距离，并将该距离除以我们想要显示的帧数。然后，对于每一帧，我们将此距离乘以帧数。
所以现在我们有每个帧的点位置。如果它的SVG可能已经存在了。如果它是多色的，你可能想要混合图像1和图像2中的颜色。
你可以用与计算点位置相同的方式做到这一点....在开始时采用颜色...在结束时采用颜色。找到差异，然后继续改变小步骤，其中步数等于你想要显示的帧数。
你可以看看我的博客文章（带有github项目的链接）关于我写的图像变形库：http://peter.pisljar.si/#!/en/projects/image_morph_js
然而......要找到匹配点，它可能会更有用。