爲什麼svg morphing不起作用

Question

我有svg動畫的問題，它根本無法工作。 我已經做了所有與互聯網教程，包括兩個形狀相同數量的點。但不是動畫，而只是將一個形狀改變成另一個形狀。這裏是我的代碼：

<path fill="#1EB287"> 
<animate 
     attributeName="d" 
     dur="3000ms" 
     repeatCount="indefinite" 
     values="M12.193,44.64c-0.004-0.278,0.049-0.563,0.16-0.854c0.11-0.29,0.266-0.563,0.468-0.817 
c0.092-0.115,0.191-0.224,0.299-0.327c0.13-0.125,0.271-0.242,0.424-0.35c0.19-0.132,0.392-0.244,0.606-0.333 
c0.101-0.042,0.204-0.08,0.31-0.112c0.289-0.088,0.559-0.066,0.812,0.063c0.084,0.043,0.167,0.099,0.248,0.166 
c0.06,0.05,0.118,0.106,0.172,0.166c0.112,0.123,0.213,0.266,0.302,0.43c0.1,0.184,0.186,0.392,0.257,0.626 
c0.045,0.147,0.081,0.318,0.107,0.512c0.043,0.313,0.063,0.687,0.058,1.121c-0.003,0.326-0.101,1.924-0.15,2.409 
c-0.027,0.263-0.057,0.533-0.09,0.809c-0.05,0.417-0.108,0.848-0.173,1.293c-0.04,0.274-0.083,0.553-0.128,0.838 
c-0.092,0.577-0.188,1.159-0.288,1.748c-0.083,0.49-0.169,0.984-0.259,1.483c-0.196,1.101-0.4,2.193-0.612,3.279L12.193,44.64z; 

       M137.262,49.477c-0.019-0.148-0.231-0.264-0.231-1.14c0-1.983,1.124-3.321,2.925-3.801l-0.545,2.181 
c-0.692,2.793-1.354,5.106-1.354,6.743c0,1.669,0.81,2.627,3.188,2.627c1.91,0,3.091-0.606,3.934-1.876 
c0.39-0.588,0.706-1.32,0.986-2.199c0.294-0.918,0.553-1.998,0.814-3.245l0.715-3.38l0.375-1.775h-2.33l-0.729,3.367l-0.377,1.74 
c-0.451,2.078-0.819,3.408-1.184,4.258c-0.58,1.361-1.144,1.493-2.008,1.493c-0.826,0-1.14-0.545-1.14-1.487 
c0-0.694,0.173-1.599,0.539-3.042c0.364-1.443,0.923-3.427,1.689-6.278c-0.347-0.066-0.512-0.083-0.793-0.083 
c-3.206,0-6.247,2.049-6.247,4.379C135.494,49.064,136.173,49.477,137.262,49.477z;"/> 

Answer 1

您不必繪製在每個命令的相同順序和類型。這就是爲什麼它不能製作動畫。只需將小寫「c」的數目作爲開始。第一條路徑有17條，第二條路徑有14條。最後一行的第二條路徑中有一個大寫的C，在第一條路徑中沒有匹配的命令。在第一個路徑中有一個大寫的L，第二個路徑中沒有匹配的命令。

請在閱讀本文之前閱讀一些SVG教程。這是你在這個問題上的第二篇文章。