svgアニメーションタグの変更

Question

私はsvgの下に移動すると、右に行くためにそれをタップするとrectanguleをしようとしているが、それは動作しないようだ。コンソールはエラーを表示しません。

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

更新：answers.Butのおかげで、今私は、変数がexample.Is 5であれば、私は秒のアニメーションを開始することができますどのように私は、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>