svg animate tag change

Question

Я пытаюсь сделать прямоугольник в svg move down и их, когда вы нажимаете на него, чтобы идти вправо, но кажется, что он не работает. Консоль не показывает никаких ошибок.

Here is a JSFiddle:https://jsfiddle.net/troosfx8/ 

Обновление: Спасибо за answers.But теперь я хочу знать, как я могу сделать вторую анимацию начать, если переменная 5 для example.Is Есть ли способ, что я могу сделать анимацию SVG начать на основе состояние?

Answer 1

Существует гораздо более простое решение, чем то, как вы пытаетесь сделать это выше.

Всё, что вам нужно сделать, это добавить еще один элемент <animate>, который начинается щелчком мыши.

<svg width="360" height="400" 
 
    style="border:#9999ff dotted 7px; border-radius:12px;" > 
 
    <rect id="Rect" x="70" y="70" width="50" height="50" 
 
      style="stroke:yellow; stroke-width:5px; fill:orange;"> 
 
     <animate id="pos" attributeName="y" from="70" to="140" dur="1s" 
 
       repeatCount="none" fill="freeze"/> 
 
     <animate id="pos" attributeName="x" from="70" to="140" dur="1s" 
 
       repeatCount="none" fill="freeze" begin="click"/> 
 
    </rect> 
 
</svg>