Angular技术问题：从路径加载SVG并序列化为字符串

嘿，我刚好碰到过类似的问题！你的代码现在有个核心问题——Angular的HttpClient默认会把响应自动解析成JSON，但SVG是XML格式的文本，所以直接这么请求会导致解析错误，而且你拿到的res根本不是DOM元素，用XMLSerializer自然没法正确序列化。

给你两种可行的解决方案，看你需求选：

方案一：直接获取SVG原始字符串（最简单） #

如果不需要修改SVG内容，直接拿到字符串就行，只要给HttpClient加上responseType: 'text'配置，就能直接得到SVG的文本内容，不用再序列化了：

async getSvgString(): Promise<string> {
  try {
    // 关键配置：告诉HttpClient返回纯文本，不要解析成JSON
    const svgString = await this.httpClient.get(
      `assets/images/result/${this.icon}.svg`,
      { responseType: 'text' }
    ).toPromise();

    return svgString;
  } catch (err) {
    console.error('加载SVG出错:', err);
    throw err;
  }
}

方案二：解析为DOM对象后再序列化（适合需要修改SVG的场景） #

如果你需要先修改SVG的内容（比如改尺寸、颜色），再转成字符串，可以先把文本解析成DOM对象，修改后再序列化：

async getModifiedSvgString(): Promise<string> {
  try {
    // 先获取SVG文本
    const svgText = await this.httpClient.get(
      `assets/images/result/${this.icon}.svg`,
      { responseType: 'text' }
    ).toPromise();

    // 把文本解析成SVG DOM对象
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const svgElement = svgDoc.querySelector('svg');

    // 这里可以对SVG做任意修改，比如调整宽度
    if (svgElement) {
      svgElement.setAttribute('width', '100');
    }

    // 序列化回字符串
    const serializer = new XMLSerializer();
    return serializer.serializeToString(svgElement);
  } catch (err) {
    console.error('处理SVG出错:', err);
    throw err;
  }
}

额外提醒 #

• 确保你的angular.json里已经正确配置了assets目录，比如：

"assets": [
  "src/assets",
  // 其他资源路径
]

• 如果你用的是Angular 15及以上版本，建议用firstValueFrom替代已废弃的toPromise()，用法如下：

import { firstValueFrom } from 'rxjs';

// ...
const svgString = await firstValueFrom(
  this.httpClient.get(`assets/images/result/${this.icon}.svg`, { responseType: 'text' })
);

这样应该就能完美解决你的问题了！

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