SVG SMIL动画闪烁,但没有动画流畅

时间:2015-02-26 15:16:22

标签: jquery animation svg smil

有人可以告诉我为什么我的动画不能正常工作吗?我有两种形状,我试图补间。我有相同数量的坐标。这两种形状都可以在下面的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"


/>

1 个答案:

答案 0 :(得分:1)

它们没有相同数量的命令。某些路径具有额外的z命令(或者其中一些命令缺少z命令,具体取决于您的观点。)

将退化案例更改为此...

                              C0,
                              0,
                              0,
                              0,
                              0,
                              0z

让一切顺利进行。