单击按钮时切换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> 

或者点击此链接：jsfiddle

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>

Answer 2

我认为这是不可能的，基本的SVG动画元素，你需要的JavaScript。
^{（其实，有什么R.Longson在comment建议）}

一个肮脏的方式可以由添加第二个动画，这将使你的元素动画到原来的步骤，并触发正确的方法animate.beginElement()点击你的<polygon>。

但是您需要保留当前状态的参考，因此在以下示例中，我将big_state属性添加到polygon对象。

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>