SVG路径和变形

Question

我有一些理论上的问题。 可以说我有2个路径svg。每个都有不同的点数。一个有4个贝塞尔曲线，另一个有3个。

我想要做的是将一个变成另一个。 现在，我知道他们必须具有相同的确切结构和相同数量的点才能这样做。

所以，问题是，我可以在其路径中添加“虚拟点”以获得相同的结构和点数，而不会更改对象的形状？

例如，在其中一个路径中取一个点，并在其后添加相同的点以增加点数。或者在两条路径上创建贝塞尔曲线，这些曲线实际上会假装为曲线而不是曲线。这会改变对象吗？如果我有x = 1 y = 1和x = 4 y = 4的点，那么使用这种形式会使Bézier曲线成为一条线吗？ （M1 1C1 1 4 4 4 4）

Answer 1

想通了。在同一条线上的任何位置使用控制点作为坐标将贝塞尔变换成一条直线，同样，如果您使用相同的点作为两个控制点，起点和终点坐标，则可以将曲线制作成一个点。将更多这些点添加到路径中并不会改变对象的外观，只是将更多数据添加到路径中。

http://www.petercollingridge.co.uk/book/export/html/560

唐氏在三次曲线可以对齐以所述方式的点，以获得所需的结果

Answer 2

我有一个简单使用D3插件进行动画支持不同数量的点的SVG路径，它也只会激发与原始路径不同的部分路径，而不是整个路径。 7kb缩小：https://pratyushcrd.github.io/d3-path-morphing/