Question

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

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

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

Answer 1

有一个比你上面尝试的方法简单得多的解决方案。

您需要做的就是添加另一个以点击开始的<animate>元素。

＆＃13;

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

＆＃13;

svg动画标签更改

1 个答案: