如何在SVG中通过hover触发animateTransform并恢复初始状态？

问题根源是你把鼠标事件绑定在了会移动的元素上：当元素通过动画移开鼠标范围时，会立即触发mouseout，动画重置让元素回到原位，又触发mouseover，形成循环闪烁。

解决思路是将鼠标事件绑定到固定不动的透明占位元素上，这个元素覆盖动画元素的初始区域（可按需调整大小），这样不管动画元素如何移动，只要鼠标还在占位元素范围内，就不会触发mouseout。

修改后的代码示例：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <!-- 透明占位元素，负责接收鼠标事件 -->
    <rect id="trigger" x="10" y="10" width="20" height="40" fill="transparent" />
    <g transform="translate(0 0)">
        <rect x="10" y="10" width="20" height="40" fill="black" />
        <!-- 绑定占位元素的鼠标事件 -->
        <animateTransform 
            attributeName="transform" 
            begin="trigger.mouseover" 
            end="trigger.mouseout" 
            dur="2s" 
            type="translate" 
            from="0 0" 
            to="50 50" 
            repeatCount="1" 
            fill="remove" />
    </g>
</svg>

关键说明：

• 透明占位元素id="trigger"设置为不可见但可交互，鼠标事件完全由它接收
• 动画的begin和end明确绑定到该占位元素的mouseover和mouseout事件，避免了移动元素导致的事件循环
• 若需要扩大触发区域，只需调整占位元素的位置和尺寸即可

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