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

~~我认为使用基本的svg动画元素是不可能的，你需要javascript。~~ ^{（实际上，R.Longson在comment）中提出了}

一种肮脏的方式可能包括添加第二个动画，这将使您的元素为原始步骤设置动画，并在点击animate.beginElement()时触发正确的<polygon>方法。

但是您需要保留对当前状态的引用，因此在以下示例中，我向big_state对象添加了polygon属性。

＆＃13;

 var poly = document.querySelector('polygon');
 poly.onclick = function() {
   var anims = this.querySelectorAll('animate');
   anims[+!!this.big_state].beginElement();
   this.big_state = !this.big_state;
 }

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

单击按钮

2 个答案: