如何在JavaScript中引用可动态编辑的SVG元素适配明暗模式？

你当前通过图片路径引入SVG的方式（比如用<img>标签），会让SVG成为独立文档，无法继承页面的CSS变量，因此没法响应主题切换。下面是几种可行的解决办法：

1. 内联SVG到DOM中 #

把SVG内容直接插入网格元素，让它成为页面DOM的一部分，就能直接应用页面的CSS变量。可以通过fetch加载SVG文件内容后插入容器：

// 替换原有的图片加载逻辑
async function addSVGToGrid(svgPath, gridItem) {
  try {
    const res = await fetch(svgPath);
    const svgContent = await res.text();
    gridItem.innerHTML = svgContent;
  } catch (err) {
    console.error('加载SVG失败:', err);
  }
}

// 构建网格时调用该函数
const images = ['items/svg-1.svg'];
images.forEach(async (svgPath) => {
  const gridItem = document.createElement('div');
  gridItem.classList.add('masonry-item');
  await addSVGToGrid(svgPath, gridItem);
  document.querySelector('.masonry-grid').appendChild(gridItem);
});

插入后的SVG里的.cls-1类会自动继承--textColour变量，跟随主题切换变色。

2. 使用<object>标签引入SVG #

用<object>替代<img>标签引入SVG，它会把SVG作为嵌入式文档加载，能访问页面的CSS变量。需要先修改SVG文件，让需变色元素引用var(--textColour)：

• 修改SVG文件：

  <path class="cls-1" fill="var(--textColour)" d="..." />
  

• 在JS中创建<object>标签：

  const gridItem = document.createElement('div');
  gridItem.classList.add('masonry-item');
  const obj = document.createElement('object');
  obj.data = 'items/svg-1.svg';
  obj.type = 'image/svg+xml';
  gridItem.appendChild(obj);
  document.querySelector('.masonry-grid').appendChild(gridItem);
  

  切换主题时，页面的--textColour变量变化会同步到<object>内的SVG。

3. 利用currentColor传递颜色 #

如果必须用<img>标签，可以修改SVG文件，把需变色元素的fill设为currentColor，再给<img>标签绑定CSS变量：

• 修改SVG：

  <path class="cls-1" fill="currentColor" d="..." />
  

• 新增CSS：

  .masonry-grid img {
    color: var(--textColour);
  }
  

  这种方法适合SVG只有单一颜色需要切换的场景。

4. CSS Filter 快速反转颜色（临时方案） #

如果SVG只有白色元素，可以在浅色模式下用滤镜反转颜色：

.light-theme .masonry-grid img[src$=".svg"] {
  filter: invert(1);
}

缺点是若SVG包含其他颜色，会一起被反转，仅适合简单单色SVG。

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