如何在 SVG 文档中查找元素？

Question

我尝试通过 src 加载 SVG 内容，然后通过id="el"更改特定元素的颜色。

我使用这种方法：

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);
  });

结果我得到 null 尽管元素"el"出现在 SVG 文件中。

Svg 看起来像：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="50"
   height="60"
   viewBox="0 0 50 60"
   fill="none"
   version="1.1"
   id="svg8"
   sodipodi:docname="animal.svg"
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)">
  <metadata
     id="metadata14">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>

...这里的路径

我试过这种方式，所以我得到了 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);
};

如何在此内容中查找元素并更改颜色？

Answer 1

无需将其转换为 blob，然后将 blob 转换为数据 URL，因为您只需要原始 SVG 文本。

尝试这个：

fetch(src)
  .then(res => res.text())
  .then(txt => {
    const parser = new DOMParser();
    const svg = parser.parseFromString(txt, 'image/svg+xml');
    console.log(svg.getElementById("el"));
  });