SVG 路径和变形
SVG Path and morphing
我有一些理论问题。
假设我在 svg 中有 2 条路径。每个都有不同数量的点。一个有 4 条贝塞尔曲线，另一个有 3 条。
我想做的是将一个变成另一个。
现在，我知道它们必须具有完全相同的结构和相同数量的点才能这样做。
所以，问题是，我可以在它们的路径中添加 "virtual points" 以获得相同的结构和点数，而不改变对象的形状吗？
例如，在其中一条路径中取一个点，然后在其后添加相同的点以增加点数。或者在两条路径中创建一条 Bézier 曲线，它实际上会伪装成一条直线而不是一条曲线。那会改变对象吗？如果我在 x=1 y=1 和 x=4 y=4 上有点，使用这种形式会使贝塞尔曲线成为一条线吗？ (M1 1C1 1 4 4 4 4)
想通了。在与坐标相同的直线上的任何位置使用控制点将贝塞尔曲线转换为直线，如果您使用相同的点作为两个控制点，开始和结束坐标，您可以将曲线变成一个点。在路径中添加更多这些点不会改变对象的外观，只会在路径中添加更多数据。
http://www.petercollingridge.co.uk/book/export/html/560
在三次曲线下方，您可以按照描述的方式对齐点以获得所需的结果
我有一个简单易用的 d3 插件来为 svg 路径设置动画，它支持不同数量的点，而且它只为路径中与原始路径不同的部分设置动画，而不是整个路径。
7kb 缩小：https://pratyushcrd.github.io/d3-path-morphing/
我有一些理论问题。 假设我在 svg 中有 2 条路径。每个都有不同数量的点。一个有 4 条贝塞尔曲线，另一个有 3 条。
我想做的是将一个变成另一个。 现在，我知道它们必须具有完全相同的结构和相同数量的点才能这样做。
所以，问题是，我可以在它们的路径中添加 "virtual points" 以获得相同的结构和点数，而不改变对象的形状吗？
例如，在其中一条路径中取一个点，然后在其后添加相同的点以增加点数。或者在两条路径中创建一条 Bézier 曲线，它实际上会伪装成一条直线而不是一条曲线。那会改变对象吗？如果我在 x=1 y=1 和 x=4 y=4 上有点，使用这种形式会使贝塞尔曲线成为一条线吗？ (M1 1C1 1 4 4 4 4)
想通了。在与坐标相同的直线上的任何位置使用控制点将贝塞尔曲线转换为直线，如果您使用相同的点作为两个控制点，开始和结束坐标，您可以将曲线变成一个点。在路径中添加更多这些点不会改变对象的外观，只会在路径中添加更多数据。
http://www.petercollingridge.co.uk/book/export/html/560
在三次曲线下方，您可以按照描述的方式对齐点以获得所需的结果
我有一个简单易用的 d3 插件来为 svg 路径设置动画，它支持不同数量的点，而且它只为路径中与原始路径不同的部分设置动画，而不是整个路径。 7kb 缩小：https://pratyushcrd.github.io/d3-path-morphing/