如何使用JavaScript根据背景颜色动态修改SVG圆形填充色

你只需在更新圆形横坐标的逻辑中增加区间判断，动态修改填充色即可：

• 绿色背景区间：横坐标0~125、250~375，圆形填充白色
• 白色背景区间：横坐标125~250，圆形填充绿色

修改后的JS代码 #

function move() {
  let slider = document.querySelector("#slider");
  let circle = document.querySelector("#player");
  const currentX = Number(slider.value);
  circle.setAttribute("cx", currentX);
  // 按所在区间设置填充色
  circle.setAttribute("fill", currentX < 125 || currentX > 250 ? "white" : "green");
}

HTML代码不需要做任何修改，替换原有JS逻辑即可生效。

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