svg - SVG 路径和变形

Question

我有一点理论问题。假设我在 svg 中有 2 条路径。每个都有不同的点数。一条有 4 条贝塞尔曲线，另一条有 3 条。

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

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

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

score 1 · Accepted Answer

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

在三次曲线下方，您可以按照所述方式对齐点以获得所需的结果

score 1 · Accepted Answer

我有一个简单易用的 d3 插件来为支持不同点数的 svg 路径设置动画，它也仅对路径中与原始路径不同的部分进行动画处理，而不是对整个路径进行动画处理。7kb 缩小：https ://pratyushcrd.github.io/d3-path-morphing/

2 回答 2