HTMLボタンを使用せずにSVGアニメーションをプログラムでトリガすることはできませんか？

Question

私はクリックでSVG円をアニメーション以下のコード、持っている：ユーザーが円内にクリックしたときにそれが正常に動作しますが、私はプログラム的にアニメーションをトリガしたい

<circle id = "middle" cx="235" cy="235" r="100" stroke="yellow" stroke-width="0.5" fill="#ffcc00"> <animate begin="click" attributeName="fill" to="yellow" dur="1s"/> 

を。

私は$("#middle").click();を試しましたが、clickイベントが発行されてもアニメーションは発生しません。 （私も$("#middle").click(function() { audio.play(); });と設定して、音は大丈夫です）。

HTMLボタンを使用せずに、ユーザーのクリック（SVG上）をシミュレートすることによってSVGをアニメーション化する方法はありますか？

Answer 1

アニメーションをプログラムで開始する場合は、beginElementを呼び出します。

<svg> 
 
    <circle id = "middle" cx="50" cy="50" r="25" stroke="yellow" stroke-width="0.5" fill="#ffcc00"> 
 
    <animate id="a" begin="click" attributeName="fill" to="yellow" dur="1s"/> 
 
</circle> 
 
</svg> 
 
<button onclick="document.getElementById('a').beginElement();">>Click Me!</button>