如何在SVG文档中查找指定元素并修改其颜色？

尝试通过src加载SVG内容，想要修改id为"el"的指定元素颜色，采用以下方法时，doc.getElementById("el")返回null（但SVG文件中确实存在该元素）：

fetch(src)
  .then((res) => res.blob())
  .then((blob) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(reader.result.toString(), 'image/svg+xml');
      console.log(doc.getElementById("el")); // null
    };
    reader.readAsDataURL(blob);
  });

也曾尝试用XHR获取SVG内容字符串，但仍未解决问题：

src = `${baseHref}assets/images/${src}`;

var xhr = new XMLHttpRequest();
xhr.open('GET', src);
xhr.send();
xhr.onreadystatechange = (e) => {
  const el = e.srcElement as any;
  console.log(el?.response);
};

问题根源 #

使用readAsDataURL会将SVG文件转换为base64编码的字符串，而非原始XML文本，DOMParser解析这种base64字符串无法生成正确的SVG DOM结构，自然找不到目标元素。

方法1：直接Fetch获取文本（推荐） #

跳过Blob和FileReader步骤，直接获取SVG原始文本内容后解析：

fetch(src)
  .then(res => res.text()) // 直接获取SVG文本
  .then(svgText => {
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const targetEl = svgDoc.getElementById('el');
    
    if (targetEl) {
      // 修改填充色，若需修改描边色则用targetEl.style.stroke
      targetEl.style.fill = '#ff0000';
      // 也可通过setAttribute修改属性
      // targetEl.setAttribute('fill', '#ff0000');
      
      // 将修改后的SVG插入页面
      document.body.appendChild(svgDoc.documentElement);
    }
  });

方法2：XHR获取文本并处理 #

指定XHR返回文本类型，解析后操作元素：

src = `${baseHref}assets/images/${src}`;

const xhr = new XMLHttpRequest();
xhr.open('GET', src);
xhr.responseType = 'text'; // 明确返回文本格式
xhr.onload = () => {
  if (xhr.status === 200) {
    const svgText = xhr.response;
    const parser = new DOMParser();
    const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
    const targetEl = svgDoc.getElementById('el');
    
    if (targetEl) {
      targetEl.style.fill = '#00ff00';
      // 插入页面或其他后续操作
      document.body.appendChild(svgDoc.documentElement);
    }
  }
};
xhr.send();

额外注意事项 #

• 确认SVG文件中id="el"的拼写完全正确，且该元素未被嵌套在特殊命名空间元素中（默认SVG命名空间不影响getElementById）
• 若目标元素使用class而非id，可改用svgDoc.querySelector('.target-class')获取
• 根据元素实际样式需求，选择修改fill（填充色）或stroke（描边色）

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