SVG图标SMIL动画鼠标移出后第二个圆形仍持续运行求助

嘿，我帮你找到了问题的根源，也整理了修复方案！

问题原因 #

你的第二个圆形动画在鼠标移出后停不下来，主要是两个关键点：

• SMIL动画默认的fill属性值是freeze，这意味着动画结束后会停在最后一帧的状态，哪怕触发条件已经消失；
• 你只给第二个圆的动画设置了begin="mouseover"，但没有配对end="mouseout"，导致鼠标移出时没有触发动画终止的指令，循环动画就会一直跑下去。

修复步骤 #

只需要对第二个圆形的动画做两处修改，其他动画也可以同步调整来保持一致性：

1. 给动画添加end="mouseout"，让鼠标移出事件能终止动画；
2. 设置fill="remove"，确保动画终止后立刻回到初始状态，而不是停在最后一帧。

修改后的第二个圆形动画代码示例：

<circle cx="100" cy="100" r="50" fill="#4CAF50">
  <animate
    attributeName="cx"
    from="100"
    to="150"
    dur="0.5s"
    begin="mouseover"
    end="mouseout"
    fill="remove"
    repeatCount="indefinite"
    alternate="true"
  />
</circle>

额外优化建议 #

如果你的SVG里有多个动画，也可以给整个<svg>标签添加事件来统一终止所有动画，比如：

<svg ... onmouseout="document.querySelectorAll('animate').forEach(anim => anim.endElement())">

不过更推荐给每个动画单独配对begin和end事件，这样逻辑更清晰，也避免全局操作可能带来的意外问题。

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