1. 首页
  2. 问答
  3. svg animate tag changing

svg animate tag changing

2016-09-17 59 views
1

我想在svg中向下移动一个矩形，当你点击它时，它向右移动，但似乎它不起作用。控制台不显示任何错误。svg animate tag changing

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

更新：感谢您的answers.But现在我想知道我怎样才能使第二动画开始，如果一个变量example.Is有什么办法可以让SVG动画开始根据5条件？

来源

2016-09-17 Stefan Octavian

+0

“有什么办法可以让一个SVG动画开始根据一个条件？”你应该问这个问题的另一个问题，而不是希望在这一个新的答案。毕竟它*是一个不同的问题。 – HPierce

+1

我想问另一个问题，但我不能再过两天......。 :( –

回答

2

有一个比你上面试图做的更简单的解决方案。

您只需添加另一个<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>

来源

2016-09-17 12:06:09

+0

谢谢loooot，Paul LeBeau！谢谢sooo。 –

相关问题

 相关问题