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教程。这是你关于这个问题的第二篇文章。

为什么svg变形不起作用

1 个答案: