jquery - SBG SMIL 动画闪烁但动画不流畅

Question

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


/>

Answer 1

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

将退化案例更改为...

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

使一切动画流畅。