svg 动画标签更改答案

【问题标题】：svg animate tag changingsvg 动画标签更改
【发布时间】：2017-01-25 12:46:05
【问题描述】：

我正在尝试使 svg 中的矩形向下移动，当你点击它时，它们会向右移动，但它似乎不起作用。控制台没有显示任何错误。

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

更新：感谢您的回答。但现在我想知道如果变量为 5，我该如何开始第二个动画。有什么方法可以根据条件开始 svg 动画？

【问题讨论】：

"有什么方法可以让 svg 动画根据条件开始？"您应该为此提出另一个问题，而不是希望对此有新的答案。毕竟它是一个不同的问题。
我想问另一个问题，但我不能 2 天...再次。 :(

标签： javascript html animation svg

【解决方案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>

【讨论】：

谢谢你，Paul LeBeau！非常感谢。