Toggle SVG animation effect when click the button - html

Question

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>
Or click this link: jsfiddle

Answer 1

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>

Answer 2

I think that it's not possible with basic svg animate elements, you will need javascript.
(Actually there is what R.Longson proposed in comment)
A dirty way could consist to add a second animate, which will make your element animate to the original step, and trigger the right animate.beginElement() method on click of your <polygon>.
But you will need to keep a reference of the current state you are in, so in the following example, I added a big_state property to the polygon object.
var poly = document.querySelector('polygon');
poly.onclick = function() {
var anims = this.querySelectorAll('animate');
anims[+!!this.big_state].beginElement();
this.big_state = !this.big_state;
}
<svg viewBox="0 0 24 24" preserveAspectRatio="none">
<script type="text/ecmascript" xlink:href="FakeSmile-master/smil.user.js" />
<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="indefinite" dur="0.5s" fill="freeze" id="bigger" />
<animate attributeName="points" attributeType="XML" from="2,0 12,11 22,0" to="2,-5 12,6 22,-5" begin="indefinite" dur="0.5s" fill="freeze" id="smaller" />
</polygon>
</svg>