如何实现事件触发时SVG元素从当前位置平滑移动到指定点

需要在事件触发时，将SVG内的image元素从当前位置平滑移动到指定坐标点。由于无法提前获知元素的实时位置，无法使用基于keyframes的预定义CSS动画实现，最初尝试通过DOM操作动态添加SVG <animate>元素完成效果，初始实现代码如下：

var curX = parseFloat(image.getAttribute('x'));
var curY = parseFloat(image.getAttribute('y')); // 暂未使用
var curOpacity = parseFloat(image.getAttribute('opacity')); // 暂未使用

var animation = document.createElementNS(svgNS, 'animate');
animation.setAttribute('attributeName', 'x');
animation.setAttribute('from', curX);
animation.setAttribute('to', 0); // 移动到左边界
animation.setAttribute('dur', '2s'); // 也测试过3s、5s配置
animation.setAttribute('repeatCount', 1);

image.appendChild(animation);

• 动画时长设置为3s或5s时，<animate>元素追加后元素会立即开始移动，但动画结束后元素会回到初始位置，需要实现动画结束后元素停留在终点位置的效果。
• 动画时长设置为2s及更短时，元素无法平滑移动，会直接闪烁到左边界后再跳回，原因未知。

给<animate>元素添加fill="freeze"属性后，已经解决动画结束后元素复位的第一个问题，但短时长动画卡顿、抽动的问题可通过setTimeout稳定复现，复现代码如下：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" class="inline-block mb-1">
    <image href="本地测试图片路径"
        height="200" width="200" x="200" y="200"/>

    <script>
        // <![CDATA[
        var startAnimation = function ()
        {
            const svgNS = "http://www.w3.org/2000/svg";

            var image = document.querySelector('image');
            var curX = parseFloat(image.getAttribute('x'));
            var curY = parseFloat(image.getAttribute('y')); // 暂未使用
            var curOpacity = parseFloat(image.getAttribute('opacity')); // 暂未使用

            var animation = document.createElementNS(svgNS, 'animate');
            animation.setAttribute('attributeName', 'x');
            animation.setAttribute('from', curX);
            animation.setAttribute('to', 0); // 移动到左边界
            animation.setAttribute('dur', '2s'); // 也测试过3s、5s配置
            animation.setAttribute('repeatCount', 1);
            animation.setAttribute('fill', 'freeze');

            image.appendChild(animation);
        };
        document.addEventListener('DOMContentLoaded', () => window.setTimeout(startAnimation, 1000));
        // ]]>
    </script>
</svg>

复现现象为：元素初始会出现抽动，移动过半后才会开始平滑运动。测试环境为64位Chrome 102，本机性能无异常，使用window.requestAnimationFrame手动实现的动画无卡顿问题，需要更稳定的实现方案。

方案1：修复原生SMIL动画的时序问题 #

动态追加的SVG SMIL动画出现开头抽动、跳变，是因为元素插入DOM后浏览器默认会立即计算动画时间线，没有等待动画状态初始化，存在时序冲突。给<animate>元素补充两个配置即可修复：

• 添加begin="indefinite"属性，禁止动画插入后自动启动
• 元素插入DOM后，手动调用beginElement()方法显式触发动画

修复后的完整动画配置代码：

var animation = document.createElementNS(svgNS, 'animate');
animation.setAttribute('attributeName', 'x');
animation.setAttribute('from', curX);
animation.setAttribute('to', 0);
animation.setAttribute('dur', '2s');
animation.setAttribute('repeatCount', 1);
animation.setAttribute('fill', 'freeze');
animation.setAttribute('begin', 'indefinite');
image.appendChild(animation);
animation.beginElement(); // 显式启动，规避浏览器初始化时序问题

方案2：使用Web Animations API（优先推荐） #

没有SMIL动画的历史兼容坑，性能和原生requestAnimationFrame一致，支持动态传入起始/终点坐标，不需要操作DOM插入动画元素，代码更简洁：

// 获取元素当前位置
const curX = parseFloat(image.getAttribute('x'));
// 直接创建并启动动画
image.animate(
  [
    { x: `${curX}` },
    { x: '0' }
  ],
  {
    duration: 2000, // 时长单位为毫秒，2000对应2s
    fill: 'forwards', // 动画结束后保持最终状态
    easing: 'linear' // 可按需替换为ease、ease-in-out等缓动函数
  }
);

如果需要同时实现y轴位移、透明度变化等效果，直接在关键帧数组中添加对应属性即可，不需要额外创建多个动画元素。

方案3：动态设置CSS transition（轻量场景适用） #

不需要编写额外动画逻辑，触发动画时给元素设置过渡规则，再修改目标属性，浏览器会自动完成补间动画：

// 触发动画时设置过渡规则
image.style.transition = 'x 2s linear';
// 直接修改目标属性值
image.setAttribute('x', 0);
// 动画结束后可移除transition配置，避免后续修改属性时触发意外动画
setTimeout(() => {
  image.style.transition = '';
}, 2000);

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