如何在HTML中使用JavaScript反向SVG动画以实现铁路杠杆的双向操作

看起来你在做一个超有意思的铁路杠杆模拟网站，用SVG实现杠杆动画的思路非常合适！不过遇到了双向动画的棘手问题对吧？我来帮你拆解一下当前代码的问题，以及给出具体的解决方法。

首先分析你当前代码的问题 #

你现在的思路是通过动态修改keyPoints来切换动画方向，然后调用beginElement()重新播放，但这种方式有两个核心问题：

1. 当SVG动画设置了fill="freeze"时，动画结束后元素的状态会被冻结，直接修改keyPoints再播放，浏览器可能不会正确重置元素的初始状态，导致动画不触发；
2. 你没有同步修改animateTransform的values属性（比如pull1的正向是1 1;1 0.9，反向需要改成1 0.9;1 1），只改keyPoints无法完全匹配反向逻辑。

另外你提到的“文本移动太远”的问题，是因为pull3（文本的动画）的path终点43.512比杠杆图片的34.352大，两者移动距离不匹配，调整成一致即可解决。

解决方案：分方向控制动画，避免动态修改keyPoints #

我们可以利用SVG动画的原生方法，结合杠杆状态来分别控制正向（拉动）和反向（重置）动画，同时解决文本移动偏移的问题。

具体修改步骤：

1. 初始化时保持动画的正向配置：创建SVG时，不要动态修改keyPoints，保持初始的keyPoints="0;1"，pull1的values="1 1;1 0.9"，同时把pull3的path改成和pull2一致的M 0 0 L 0 34.352，解决文本移动过远的问题。
2. 点击事件中根据杠杆状态播放对应动画：
   • 当拉动杠杆（状态变为true）：直接调用beginElement()播放正向动画；
   • 当重置杠杆（状态变为false）：修改动画的values和keyPoints为反向配置，播放后再自动重置回正向配置，确保下次点击正常触发。

修改后的完整代码示例

// 你的leverframe定义保持不变
const leverframe = {
  "1": { "id": "HJ1", "type": "d" },
  "2": { "id": "HJ2", "type": "s" },
  "3": { "id": "HJ3", "type": "s" },
  "4": { "id": "HJ4", "type": "es" }
}

// box.html中的代码修改如下
const leverlist = new Map()
const levers = document.getElementById('levers')

for (const lever of Object.keys(leverframe)) {
  const leverimg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  levers.appendChild(leverimg)
  
  // 修正pull3的path，和pull2保持一致，解决文本移动过远
  leverimg.outerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="${lever}" viewBox="0 0 35 300" width="35px" height="300px">
    <image href="https://cdn.glitch.global/35ec23e6-47cb-4d5f-87eb-598ad1888739/${leverframe[lever].type}.png?v=1749249192147" height="329" y="-0.579" style="transform-box: fill-box; transform-origin: 50% 50%;">
      <title>image</title>
      <animateTransform id="${lever}pull1" type="scale" additive="sum" attributeName="transform" values="1 1;1 0.9" begin="indefinite" dur="2s" fill="freeze" keyTimes="0; 1" keyPoints="0; 1"></animateTransform>
      <animateMotion id="${lever}pull2" path="M 0 0 L 0 34.352" calcMode="linear" begin="pull1.begin" dur="2s" fill="freeze" keyTimes="0; 1" keyPoints="0; 1"></animateMotion>
    </image>
    <text style="white-space: pre; fill: rgb(51, 51, 51); font-family: Arial, sans-serif; font-size: 10px; text-anchor: middle;" x="12.5" y="117.5" id="object-0">
      <title>text</title>
      ${lever}
      <animateMotion id="${lever}pull3" path="M 0 0 L 0 34.352" calcMode="linear" begin="pull1.begin" dur="2s" fill="freeze" keyTimes="0; 1" keyPoints="0; 1"></animateMotion>
    </text>
  </svg>`
  
  const leversvg = document.getElementById(lever)
  leverlist.set(lever, false)
  
  leversvg.onclick = function() {
    const currentState = leverlist.get(lever)
    const newState = !currentState
    leverlist.set(lever, newState)
    
    const pull1 = document.getElementById(lever + 'pull1')
    const pull2 = document.getElementById(lever + 'pull2')
    const pull3 = document.getElementById(lever + 'pull3')
    
    if (newState) {
      // 播放正向拉动动画
      // 先重置动画的正向配置（防止之前反向修改过）
      pull1.setAttribute('values', '1 1;1 0.9')
      pull2.setAttribute('keyPoints', '0;1')
      pull3.setAttribute('keyPoints', '0;1')
      
      pull1.beginElement()
      pull2.beginElement()
      pull3.beginElement()
    } else {
      // 播放反向重置动画
      pull1.setAttribute('values', '1 0.9;1 1')
      pull2.setAttribute('keyPoints', '1;0')
      pull3.setAttribute('keyPoints', '1;0')
      
      // 监听动画结束事件，自动重置回正向配置，确保下次点击正常
      const resetAnimationConfig = () => {
        pull1.setAttribute('values', '1 1;1 0.9')
        pull2.setAttribute('keyPoints', '0;1')
        pull3.setAttribute('keyPoints', '0;1')
        pull1.removeEventListener('endEvent', resetAnimationConfig)
      }
      pull1.addEventListener('endEvent', resetAnimationConfig)
      
      pull1.beginElement()
      pull2.beginElement()
      pull3.beginElement()
    }
  }
}

更优雅的替代方案：使用SVG动画的reverse()方法 #

如果你的目标浏览器是现代浏览器（Chrome、Firefox、Edge等），可以直接使用SVG动画元素的reverse()方法，它会自动让动画从当前状态反向播放到初始状态，代码会更简洁：

leversvg.onclick = function() {
  const currentState = leverlist.get(lever)
  const newState = !currentState
  leverlist.set(lever, newState)
  
  const pull1 = document.getElementById(lever + 'pull1')
  const pull2 = document.getElementById(lever + 'pull2')
  const pull3 = document.getElementById(lever + 'pull3')
  
  if (newState) {
    // 正向拉动
    pull1.beginElement()
    pull2.beginElement()
    pull3.beginElement()
  } else {
    // 反向重置：利用reverse()方法
    try {
      pull1.reverse()
      pull2.reverse()
      pull3.reverse()
    } catch (e) {
      // 处理动画尚未开始的边界情况（比如第一次点击重置）
      pull1.setAttribute('values', '1 0.9;1 1')
      pull1.beginElement()
      pull2.setAttribute('keyPoints', '1;0')
      pull2.beginElement()
      pull3.setAttribute('keyPoints', '1;0')
      pull3.beginElement()
      
      setTimeout(() => {
        pull1.setAttribute('values', '1 1;1 0.9')
        pull2.setAttribute('keyPoints', '0;1')
        pull3.setAttribute('keyPoints', '0;1')
      }, 2000)
    }
  }
}

这个方法的优势是不需要手动修改values和keyPoints，但需要处理动画尚未播放过的边界情况（比如用户还没拉动杠杆就点击重置）。

内容来源于stack exchange