如果不使用HTML按钮，就无法通过编程方式触发SVG动画

SVG animation cannot be triggered programmatically, without using an HTML button?

本文关键字：编程 方式触 动画 SVG HTML 按钮 如果不      更新时间：2023-12-24

我有以下一段代码，它在点击时为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();，但动画没有发生，即使发出了单击事件。（我也设置了$("#middle").click(function() { audio.play(); });，声音播放得很好）。

有没有一种方法可以通过模拟用户点击（在SVG上）而不使用HTML按钮来动画化SVG？

如果要以程序方式启动动画，请调用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>

相关文章：