单击按钮时切换SVG动画效果 [英] Toggle SVG animation effect when click the button

问题描述

我是SVG初学者，所以请多多包涵.

I'm a SVG beginner so please bear with me.

基本上，我希望对三角形进行动画处理，使其在单击时从顶部移动到底部，并在再次单击时从底部移动到顶部.

Basically, I wish to animate a triangle to move from top to bottom when click and move from bottom to top if click again.

我的问题是，现在我只能通过单击将三角形从上到下移动.谁能建议解决这个问题的方法?任何指导将不胜感激.

My problem is now I can only move a triangle from top to bottom by clicking it. Can anyone suggest a solution to this issue? Any guidance would be appreciated.

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

或单击此链接: jsfiddle

推荐答案

这是仅SMIL的答案.如果需要IE支持，请添加 fakeSmile .

Here's a SMIL only answer. If you want IE support, add 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>

这篇关于单击按钮时切换SVG动画效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！