有人可以告诉我为什么我的动画不能正常工作吗?我有两种形状,我试图补间。我有相同数量的坐标。这两种形状都可以在下面的codepen链接中看到。
http://codepen.io/tands/pen/myKPPb
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="0 0 453.5 290">
<path
id="p1"
fill="#000000"
d="
M226.8, 34.9
C146.3, 34.9, 71.5, 22, 8.9, 0
C3.1, 20.1, 0, 41.3, 0, 63.2
C0, 188.5, 101.5, 290, 226.8, 290
S453.5, 188.5, 453.5, 63.2
c0-21.9-3.1-43.1-8.9-63.2
C382.1, 22, 307.2, 34.9, 226.8, 34.9z
H0z
"
/>
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="
M226.8, 34.9
C146.3, 34.9, 71.5, 22, 8.9, 0
C3.1, 20.1, 0, 41.3, 0, 63.2
C0, 188.5, 101.5, 290, 226.8, 290
S453.5, 188.5, 453.5, 63.2
c0-21.9-3.1-43.1-8.9-63.2
C382.1, 22, 307.2, 34.9, 226.8, 34.9z
H0z
"
to="
M8.9,
0
C3.1,
20.1,
0,
41.3,
0,
63.2
C3.1,
20.1,
0,
41.3,
0,
63.2
C0,
188.5,
101.5,
290,
226.8,
290
S453.5,
188.5,
453.5,
63.2
c0-21.9-3.1-43.1-8.9-63.2
C0,
0,
0,
0,
0,
0
H8.9z
"
dur="2s"
repeatCount="indefinite"
/>
答案 0 :(得分:1)
它们没有相同数量的命令。某些路径具有额外的z
命令(或者其中一些命令缺少z
命令,具体取决于您的观点。)
将退化案例更改为此...
C0,
0,
0,
0,
0,
0z
让一切顺利进行。