一、实现SVG深色模式下黑色元素转为白色（CSS+JS方案） #

针对你需要在黑色背景下让SVG中所有黑色元素（路径、文本、渐变等）变为白色的需求，这里提供两种可行方案：

1. CSS自动适配系统深色模式 #

如果你的SVG是内联嵌入HTML的，可以直接用CSS媒体查询实现自动切换，无需JS：

/* 浅色模式保持默认样式 */
@media (prefers-color-scheme: dark) {
  /* 匹配所有黑色填充的元素，覆盖多种颜色写法 */
  svg [fill="black"],
  svg [fill="#000"],
  svg [fill="#000000"],
  svg [fill="rgb(0, 0, 0)"] {
    fill: white !important;
  }
  /* 匹配所有黑色描边的元素 */
  svg [stroke="black"],
  svg [stroke="#000"],
  svg [stroke="#000000"],
  svg [stroke="rgb(0, 0, 0)"] {
    stroke: white !important;
  }
  /* 处理渐变中的黑色色标 */
  svg stop[stop-color="black"],
  svg stop[stop-color="#000"] {
    stop-color: white !important;
  }
}

如果SVG是通过<object>标签引入的，需要把这段样式直接写在SVG文件的<defs>内部，或者通过JS注入到SVG文档中。

2. JS手动切换深色/浅色模式 #

如果需要手动控制切换（比如添加一个切换按钮），可以用JS操作SVG的DOM元素：

// 判断颜色是否为黑色的辅助函数，覆盖常见写法
function isBlack(color) {
  const lowerColor = color?.toLowerCase();
  return lowerColor === 'black' || lowerColor === '#000' || lowerColor === '#000000' || lowerColor === 'rgb(0, 0, 0)';
}

// 切换深色模式的核心函数
function switchDarkMode(isDark) {
  const svgObj = document.getElementById('drawing');
  const svgDoc = svgObj.contentDocument;
  if (!svgDoc) return;

  // 修改所有黑色填充的元素
  svgDoc.querySelectorAll('[fill]').forEach(el => {
    const currentFill = el.getAttribute('fill');
    if (isBlack(currentFill)) {
      el.setAttribute('fill', isDark ? 'white' : currentFill);
    }
  });

  // 修改所有黑色描边的元素
  svgDoc.querySelectorAll('[stroke]').forEach(el => {
    const currentStroke = el.getAttribute('stroke');
    if (isBlack(currentStroke)) {
      el.setAttribute('stroke', isDark ? 'white' : currentStroke);
    }
  });

  // 修改渐变中的黑色色标
  svgDoc.querySelectorAll('stop[stop-color]').forEach(stop => {
    const currentColor = stop.getAttribute('stop-color');
    if (isBlack(currentColor)) {
      stop.setAttribute('stop-color', isDark ? 'white' : currentColor);
    }
  });
}

// 绑定切换按钮事件（假设页面有id为toggleDark的按钮）
document.getElementById('toggleDark').addEventListener('click', () => {
  const isDark = document.body.classList.toggle('dark-mode');
  switchDarkMode(isDark);
});

二、解决测试代码中渐变属性修改无效的问题 #

你的测试代码里有两个关键错误：

1. 错误获取了属性所属元素 #

你通过svgDoc.getElementById("fgc")获取的是<linearGradient>元素，但stop-color是它内部<stop>元素的属性，不是渐变元素本身的属性。所以你之前获取的是渐变元素的stop-color（不存在，返回null），修改的也是错误的元素，自然看不到效果。

正确的做法是获取<stop>元素：

window.onload = function() {
  const drg = document.getElementById("drawing");
  const svgDoc = drg.contentDocument;
  // 获取渐变下的stop子元素
  const stopElement = svgDoc.querySelector('#fgc stop'); 
  console.log(stopElement.getAttribute("stop-color")); // 现在会输出"blue"
  stopElement.setAttribute("stop-color", "red");
  console.log(stopElement.getAttribute("stop-color")); // 输出"red"
};

2. 确保SVG加载完成后再修改 #

有时候window.onload可能在SVG完全加载前触发（虽然理论上是所有资源加载完成后），更稳妥的方式是监听<object>的load事件：

const drg = document.getElementById("drawing");
drg.addEventListener('load', function() {
  const svgDoc = this.contentDocument;
  const stopElement = svgDoc.querySelector('#fgc stop');
  stopElement.setAttribute("stop-color", "red");
});

这样就能保证SVG完全加载后再修改属性，修改效果会立即生效。

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