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/