animation - SVG 动画未正确链接

Question

我有以下 svg，我正在尝试为形状设置动画。

<svg class="svg" viewBox="0 0 100 100">
  <path fill="white">
    <animate id="close" begin="0s;open.end" attributeName="d" dur="1s"
             from="..." to="..." />
    <animate id="open"  begin="close.end"   attributeName="d" dur="1s" 
             from="..." to="...0" />
  </path>
</svg>

我面临的问题是第一个动画（#close）只在开始时发生一次，然后再也不会发生。第二个动画 (#open) 照常重复。

这是一个带有我的代码和更简单动画的代码笔（它可以正常工作）

http://codepen.io/dogoku/pen/yxKjs

谢谢你的帮助

Answer 1

一种方法是将它放在同一个动画中

<animate id="close" begin="0s" repeatCount="indefinite" attributeName="d" dur="2s"
    values="M 0,0  L 100,0 100,50 100,100 0,100 0,50; M 0,50  L 100,50 75,50 100,
    50 0,50 25,50; M 0,50  L 100,50 75,50 100,50 0,50 25,50; M 0,0  L 100,0 100,
    50 100,100 0,100 0,50" />