svg animate tag changing

我想在svg中向下移動一個矩形，當你點擊它時，它向右移動，但似乎它不起作用。控制檯不顯示任何錯誤。svg animate tag changing

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

更新：感謝您的answers.But現在我想知道我怎樣才能使第二動畫開始，如果一個變量example.Is有什麼辦法可以讓SVG動畫開始根據5條件？

來源

2016-09-17 Stefan Octavian

「有什麼辦法可以讓一個SVG動畫開始根據一個條件？」你應該問這個問題的另一個問題，而不是希望在這一個新的答案。畢竟它*是一個不同的問題。 – HPierce

我想問另一個問題，但我不能再過兩天......。 :( –

有一個比你上面試圖做的更簡單的解決方案。

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

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

svg animate tag changing

回答

相關問題