如何修改JavaScript代码实现点击SVG按钮变更指定圆形填充色？

要实现点击按钮切换两个圆形的填充色，直接在btnHandler函数里添加获取SVG元素并修改填充色的代码就行，具体修改如下：

假设你原来的btnHandler函数是这样的：

function btnHandler() {
  // 原有的更新状态文本逻辑
  document.getElementById('status').textContent = '状态已更新';
}

修改后的函数：

function btnHandler() {
  // 保留原有的状态文本更新逻辑
  document.getElementById('status').textContent = '颜色已切换';
  
  // 获取红色圆形并修改为青色(#00FFFF)
  const redCircle = document.getElementById('red-circle'); // 替换成你SVG中红色圆的实际id
  if (redCircle) {
    redCircle.setAttribute('fill', '#00FFFF');
    // 也可以用 style 属性：redCircle.style.fill = '#00FFFF';
  }
  
  // 获取绿色圆形并修改为品红色(#FF00FF)
  const greenCircle = document.getElementById('green-circle'); // 替换成你SVG中绿色圆的实际id
  if (greenCircle) {
    greenCircle.setAttribute('fill', '#FF00FF');
    // 也可以用 style 属性：greenCircle.style.fill = '#FF00FF';
  }
}

关键说明： #

• 确保你的SVG里的红色圆和绿色圆已经设置了唯一id，比如<circle id="red-circle" fill="red" ...>，代码里的id要和SVG中的对应上
• 修改填充色有两种方式：
  1. setAttribute('fill', 颜色值)：直接修改SVG元素的fill属性
  2. 元素.style.fill = 颜色值：通过CSS样式修改填充色
• 加上if (元素)的判断是为了防止元素不存在时触发报错，让代码更稳定

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