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）正常重复。

这是一个带有我的代码的codepen和更简单的动画我基于（它正常工作）

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" />

SVG动画没有正确链接

1 个答案: