如何通过JavaScript触发HTML/SVG中的矩形动画？

看起来你已经找对方向啦——把<animate>的begin属性设为indefinite就是让动画等待手动触发的关键！接下来只需要完善你的rightSide()函数，让它主动启动这个动画就行。

完整实现代码 #

<svg width="1536" height="768">
  <rect onclick="rightSide()" id="rightGreen" x="512" y="0" width="100%" height="768" fill="black">
    <animate id="openright" attributeName="x" from="512" to="1536" dur="5.5s" repeatCount="1" begin="indefinite"/>
  </rect>
</svg>

<script>
function rightSide() {
  // 获取目标动画元素
  const openRightAnimation = document.getElementById('openright');
  
  // 启动动画
  openRightAnimation.beginElement();

  // 可选：如果需要支持重复点击重新触发动画（即使上一次还没结束）
  // openRightAnimation.endElement(); // 先结束当前动画
  // openRightAnimation.beginElement(); // 再重新启动
}
</script>

关键说明 #

• 你原代码里的begin="indefinite"配置完全正确，这会让动画默认处于休眠状态，不会自动播放。
• 核心操作是调用SVG动画元素的beginElement()方法，这是SVG标准提供的手动启动动画的原生API。
• 如果需要支持重复触发（比如用户多次点击矩形都能重新开始动画），可以先调用endElement()终止当前正在运行的动画，再调用beginElement()重新启动。

内容的提问来源于stack exchange，提问作者Bootyeater