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(); });，声音播放得很好。

有没有办法通过模拟用户点击（在SVG上）来动画SVG，而不使用HTML按钮？

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>

不使用HTML按钮，无法以编程方式触发SVG动画？

1 个答案: