如何用JavaScript（优先Web Animations API）实现SVG tspan的dy属性动画？

完全可以用Web Animations API的KeyframeEffect来实现SVG元素（包括tspan或text）的dy属性动画，和你之前的代码风格保持一致。

实现示例 #

对应你给出的<animate/>示例，用JavaScript改写如下：

<svg>
  <text id="animatedText" x="30" y="30">FairBridge</text>
</svg>

<script>
// 获取目标元素
const textEl = document.getElementById('animatedText');

// 创建关键帧效果
const keyframes = new KeyframeEffect(
  textEl,
  [
    { dy: '0 0 0' }, // 起始状态
    { dy: '0 -20 20' } // 结束状态
  ],
  {
    duration: 1000, // 1秒
    iterations: Infinity // 无限重复
  }
);

// 启动动画
const animation = new Animation(keyframes, document.timeline);
animation.play();
</script>

说明 #

• Web Animations API原生支持SVG属性的动画，包括dy这种接受多值的属性，直接在关键帧中传入字符串格式的多值即可。
• 如果目标是tspan元素，只需要把获取元素的选择器改成对应的tspan节点即可，逻辑完全一致。

若无法使用KeyframeEffect的通用方案 #

如果出于某些环境限制无法使用Web Animations API，可通过requestAnimationFrame手动实现属性插值动画：

<svg>
  <text id="fallbackText" x="30" y="30">FairBridge</text>
</svg>

<script>
const textEl = document.getElementById('fallbackText');
const duration = 1000; // 动画时长
let startTime = null;

function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = ((timestamp - startTime) % duration) / duration;
  
  // 计算每个dy值的插值：从0→0，0→-20，0→20
  const dy1 = 0;
  const dy2 = progress * (-20 - 0);
  const dy3 = progress * (20 - 0);
  
  // 更新属性
  textEl.setAttribute('dy', `${dy1} ${dy2} ${dy3}`);
  
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>

这个方案通过手动计算每一帧的属性值，适用于任何支持JavaScript的环境，能给任意标签属性添加动画。

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