前端解析xml字符串

前端想解析xml文件，更改里面的内容可以这么做

• 比如后端返回如下xml字符串：
  

• 我想要更改里面的svg标签宽度、高度、视口宽高等属性这样来做：

  /**
   * 解析xml文件，给图例和地图设置宽高、视口宽高，并返回更改后的xml字符串
   */
  analysisXml(data) {
    // 创建文档对象
    // DOMParser() 构造函数新建一个 DOMParser 对象实例。此对象可用于使用该方法分析文档的文本。
    // parseFromString（）方法解析包含 HTML或XML 的字符串，返回HTMLDocument或XMLDocument
    const xmlDoc = new DOMParser().parseFromString(data, 'text/xml');
    const SVG = xmlDoc.getElementsByTagName('svg'); // 获取svg节点
    const IMAGE = xmlDoc.getElementsByTagName('image'); // 获取image节点

    // 更改svg标签的属性
    const SVG_ATTR = SVG[0].attributes;
    for (const KEY in SVG_ATTR) {
      // width  height  宽、高
      if (SVG_ATTR[KEY].name === 'width' || SVG_ATTR[KEY].name === 'height') {
        const value = '400px';
        SVG_ATTR[KEY].nodeValue = value;
        SVG_ATTR[KEY].textContent = value;
        SVG_ATTR[KEY].value = value;
      }
      // viewBox  视口
      if (SVG_ATTR[KEY].name === 'viewBox') {
        const viewBox = '0 0 400 400';;
        // 地图
        SVG_ATTR[KEY].nodeValue = viewBox;
        SVG_ATTR[KEY].textContent = viewBox;
        SVG_ATTR[KEY].value = viewBox;
      }
    }
    // 更改image标签的属性
    if (IMAGE[0]) {
      const IMAGE_ATTR = IMAGE[0].attributes;
      for (const KEY in IMAGE_ATTR) {
        // width  height  宽、高
        if (IMAGE_ATTR[KEY].name === 'width' || IMAGE_ATTR[KEY].name === 'height') {
          const VALUE = '400px';
          IMAGE_ATTR[KEY].nodeValue = VALUE;
          IMAGE_ATTR[KEY].textContent = VALUE;
          IMAGE_ATTR[KEY].value = VALUE;
        }
      }
    }
    // 该方法返回 DOM 子树序列化后的字符串。
    const S = new XMLSerializer();
    const STR = S.serializeToString(xmlDoc);
    return STR;
  }

点击查看XMLSerializer()详细介绍