如何将外部SVG文件内容加载为JavaScript变量/对象

方法1：Fetch API（现代浏览器首选） #

这是目前最简洁的原生实现，不需要引入任何第三方依赖，直接发起请求读取SVG文件的文本内容即可：

// 存储SVG内容的变量
let svgSource = '';

// 替换成你自己的SVG文件路径
fetch('./your-icon-path.svg')
  .then(res => {
    if (!res.ok) throw new Error('SVG资源加载失败');
    return res.text();
  })
  .then(svgText => {
    svgSource = svgText;
    // 后续颜色修改、渲染逻辑写在这里
  })
  .catch(err => console.error(err));

注意：该方法需要在HTTP/HTTPS服务环境下运行，直接双击本地HTML文件用file://协议打开会触发跨域限制，导致加载失败。

方法2：XMLHttpRequest（兼容老旧浏览器） #

如果需要兼容IE等不支持Fetch API的老旧浏览器，可以用传统的XHR对象实现相同效果：

let svgSource = '';
const xhr = new XMLHttpRequest();
// 替换成你的SVG文件路径
xhr.open('GET', './your-icon-path.svg', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    svgSource = xhr.responseText;
    // 后续逻辑写在这里
  }
}
xhr.send();

构建工具环境简化方案 #

如果你用Vite、Webpack等现代前端构建工具开发项目，不需要手动发请求，直接通过导入语法就能拿到SVG原始字符串：

// Vite 项目用法，加?raw后缀表示导入文件原始内容
import svgSource from './your-icon-path.svg?raw'

// Webpack 项目需要搭配raw-loader使用
// import svgSource from 'raw-loader!./your-icon-path.svg'

// 拿到svgSource后直接做后续处理即可

更可靠的颜色修改建议 #

你当前用字符串全局替换色值的写法存在隐患：如果SVG内有多个元素使用了同一个色值，会被一次性全部替换。更稳妥的方式是先把SVG字符串解析为DOM对象，精准定位到要修改的元素后再改属性，不会出现误改：

// 解析SVG为DOM节点
const parser = new DOMParser();
const svgDom = parser.parseFromString(svgSource, 'image/svg+xml');
// 精准选中你要修改的黄色圆形元素
const targetCircle = svgDom.querySelector('circle[fill="#ffbf00"]');

switch(centerId) {
  case 1:
    targetCircle.setAttribute('fill', '#005D00');
    break;
  case 2:
    targetCircle.setAttribute('fill', '#A20000');
    break;
  case 3:
    targetCircle.setAttribute('fill', '#ffbf00');
    break;
}
// 修改完成后转回字符串即可正常使用
svgSource = new XMLSerializer().serializeToString(svgDom);

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