单击按钮时切换SVG动画效果

Question

我是一个SVG初学者，所以请容忍我。

基本上，我希望动画一个三角形，从上到下移动时，点击和移动从下到上，如果再次点击。

我的问题是，现在我只能从上到下移动一个三角形，点击它。有人能提出解决这个问题的办法吗？如有任何指导，将不胜感激。

<svg viewBox="0 0 24 24" preserveAspectRatio="none">
  <polygon points="2,-5  12,6  22,-5" fill="#000">
    <animate attributeName="points" attributeType="XML"
         from="2,-5  12,6  22,-5"  to="2,0  12,11  22,0"
         begin="click" dur="0.5s"
         fill="freeze">
    </animate>
  </polygon>
</svg>

或单击此链接：小提琴

Answer 1

这是SMIL的唯一答案。如果您想要IE支持，添加fakeSmile。

​

<svg viewBox="0 0 24 24" preserveAspectRatio="none">
  <polygon points="2,0  12,11  22,0" fill="#000" display="none">
    <animate id="a2" attributeName="points" attributeType="XML"
         from="2,0  12,11  22,0"  to="2,-5  12,6  22,-5"
         begin="click" dur="0.5s"
         fill="freeze">
    </animate>
    <set attributeName="display" to="block" begin="a1.end" fill="freeze" />
    <set attributeName="display" to="none" begin="a2.end" fill="freeze" />
    <set attributeName="points" to="2,0  12,11  22,0" begin="a2.end" fill="freeze" />
  </polygon>
  <polygon points="2,-5  12,6  22,-5" fill="#000">
    <animate id="a1" attributeName="points" attributeType="XML"
         from="2,-5  12,6  22,-5"  to="2,0  12,11  22,0"
         begin="click" dur="0.5s"
         fill="freeze">
    </animate>
    <set attributeName="display" to="none" begin="a1.end" fill="freeze" />
    <set attributeName="points" to="2,-5  12,6  22,-5" begin="a1.end" fill="freeze" />
    <set attributeName="display" to="block" begin="a2.end" fill="freeze" />
  </polygon>
</svg>

​