如何用纯JavaScript批量渲染SVG并支持类统一修改颜色

核心思路 #

直接将SVG内容内嵌到DOM中，既能保留SVG的完整功能（动画、交互等），又能通过CSS类统一控制样式，同时用JavaScript批量加载指定路径/URL的SVG文件。

实现步骤 #

1. 准备基础HTML容器 #

先在页面中添加一个用于承载所有SVG的容器：

<div id="svg-container" class="svg-group"></div>

2. 定义统一控色的CSS类 #

通过类选择器控制所有SVG的填充/描边颜色，确保样式统一：

.svg-group svg.custom-svg {
  fill: #2563eb; /* 统一填充色 */
  stroke: #fff; /* 统一描边色（按需添加） */
  width: 48px;
  height: 48px;
  /* 其他统一样式，比如间距、光标等 */
}

3. 纯JavaScript批量加载渲染SVG #

编写代码遍历路径数组，通过fetch获取SVG内容并插入DOM，同时给每个SVG添加统一控制类：

// 存储所有SVG路径/URL的数组
const svgPaths = [
  './icons/home.svg',
  './icons/settings.svg',
  './icons/user.svg',
  // 更多SVG路径...
];

const svgContainer = document.getElementById('svg-container');

// 批量加载并渲染SVG
async function loadAndRenderSvgs() {
  for (const path of svgPaths) {
    try {
      const res = await fetch(path);
      const svgContent = await res.text();
      
      // 解析SVG内容并转为DOM元素
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = svgContent;
      const svgElement = tempDiv.querySelector('svg');
      
      // 添加统一控制类，可额外自定义属性
      svgElement.classList.add('custom-svg');
      svgElement.dataset.iconId = path.split('/').pop().replace('.svg', '');
      
      // 插入到容器中
      svgContainer.appendChild(svgElement);
    } catch (err) {
      console.error(`加载SVG失败: ${path}`, err);
    }
  }
}

// 执行加载
loadAndRenderSvgs();

关键优势 #

• 完全保留SVG的原生功能，不受<img>标签的限制
• 通过custom-svg类可一键修改所有SVG的颜色、尺寸等样式
• 批量处理逻辑适合大量SVG文件的场景，无需手动逐个嵌入
• 纯原生JavaScript实现，无第三方依赖

注意事项 #

• 如果SVG文件本身硬编码了fill/stroke属性，CSS需要添加!important覆盖，或者在加载时通过JS移除这些属性
• 若SVG来自跨域地址，需确保服务器配置了CORS允许访问
• 可按需扩展功能，比如添加加载状态、错误降级显示等

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