SVG元素填充色校验与元素移动功能实现问题求助

看起来你的代码里有几个关键问题导致逻辑无法正常运行，我来帮你逐一排查并修正：

1. 元素选择错误 #

document.getElementById() 的参数是元素的纯ID字符串，不需要带 # 前缀，带前缀会直接找不到元素，返回 null。

2. 条件判断用了赋值运算符 #

你在 if 里写的是 =（赋值操作）而不是 ===（严格相等比较），这会直接把颜色值赋给元素，而非判断两者是否相等，逻辑完全偏离预期。

3. 获取SVG填充色的正确方式 #

如果SVG元素的 fill 样式是通过外部CSS、<style> 标签设置的，element.style.fill 会返回空字符串——因为这个属性只能读取内联样式里的值。正确做法是用 window.getComputedStyle() 获取元素实际渲染的样式。

4. TweenMax动画执行顺序问题 #

连续调用两个 TweenMax.to() 会同时启动动画，如果你想实现「先移动到 y:0 再移动到 y:-290」的连贯效果，需要用延迟、回调或者时间线来编排顺序。

修正后的完整代码 #

function calculate() {
  // 正确获取DOM元素（不带#前缀）
  const state1 = document.getElementById("stateButton1");
  const maturity1 = document.getElementById("maturityButton1");
  
  // 获取元素实际渲染的填充色
  const stateFill = window.getComputedStyle(state1).fill;
  const maturityFill = window.getComputedStyle(maturity1).fill;
  
  // 注意：getComputedStyle返回的颜色可能是rgb格式，这里转成对应#e1532d的rgb值来比较
  const targetColor = "rgb(225, 83, 45)";
  
  if (stateFill === targetColor && maturityFill === targetColor) {
    // 用TimelineMax编排动画顺序，实现连贯的位移效果
    const tl = new TimelineMax();
    tl.to('#star,#star1', 0.1, {y: 0})
      .to('#star,#star1', 0.1, {y: -290});
    
    // 如果是想做闪烁效果（先归位再上移），也可以给第二个动画加延迟
    // TweenMax.to('#star,#star1', 0.1, {y:0});
    // TweenMax.to('#star,#star1', 0.1, {y:-290, delay: 0.1});
  }
}

额外说明 #

• 颜色格式兼容：getComputedStyle 返回的颜色格式可能因浏览器差异变化（比如部分返回十六进制，部分返回rgb/rgba），如果需要更通用的判断，可以写个小函数统一转换格式后再比较。
• 依赖检查：确保TweenMax（GSAP）已经正确引入到页面中，没有依赖的话动画逻辑也不会执行。

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